/* Simple Community Chat — intentionally self-contained to avoid theme collisions. */
.scc-chat,
.scc-login-gate {
	--scc-ink: #16233c;
	--scc-ink-soft: #3d4a63;
	--scc-muted: #5b6b83;
	--scc-line: #dde4ec;
	--scc-paper: #ffffff;
	--scc-wash: #f6f8fb;
	--scc-blue: #2563eb;
	--scc-violet: #7c3aed;
	--scc-violet-dark: #6d28d9;
	--scc-violet-soft: #eef2ff;
	--scc-navy: #16233c;
	--scc-grad: linear-gradient(90deg, #2563eb, #7c3aed);
	--scc-danger: #c73546;
	--scc-success: #0f9d58;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--scc-ink);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.scc-chat *,
.scc-login-gate * {
	box-sizing: border-box;
}

.scc-chat button,
.scc-chat textarea,
.scc-login-gate a {
	font: inherit;
}

.scc-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Logged-out gate. */
.scc-login-gate {
	max-width: 620px;
	margin: 32px auto;
	padding: 48px 30px;
	text-align: center;
	background:
		radial-gradient(circle at 15% 20%, rgba(124, 58, 237, .34), transparent 42%),
		radial-gradient(circle at 88% 82%, rgba(37, 99, 235, .28), transparent 44%),
		linear-gradient(150deg, #1b2b4a, #16233c 72%);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
	color: #fff;
}

.scc-login-gate__mark,
.scc-chat__mark {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
}

.scc-login-gate__mark {
	width: 54px;
	height: 54px;
	padding: 14px;
	margin-bottom: 16px;
	background: var(--scc-grad);
	border-radius: 18px 18px 18px 5px;
	box-shadow: 0 10px 26px rgba(37, 99, 235, .34);
}

.scc-login-gate__mark span,
.scc-chat__mark span {
	display: block;
	width: 5px;
	background: currentColor;
	border-radius: 4px;
}

.scc-login-gate__mark span:nth-child(1),
.scc-chat__mark span:nth-child(1) { height: 9px; }
.scc-login-gate__mark span:nth-child(2),
.scc-chat__mark span:nth-child(2) { height: 17px; }
.scc-login-gate__mark span:nth-child(3),
.scc-chat__mark span:nth-child(3) { height: 12px; }

.scc-login-gate__mark span { color: #fff; }

.scc-login-gate h2 {
	margin: 0 0 8px;
	color: #fff;
	font-size: clamp(24px, 4vw, 34px);
	line-height: 1.15;
}

.scc-login-gate p {
	margin: 0 auto 22px;
	color: rgba(255, 255, 255, .72);
	font-size: 16px;
}

.scc-login-gate__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--scc-grad);
	color: #fff;
	font-weight: 750;
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
	transition: transform .18s ease, box-shadow .18s ease;
}

.scc-login-gate__button:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}

/* Main shell. */
.scc-chat {
	position: relative;
	width: 100%;
	max-width: 1080px;
	margin: 28px auto;
	background: var(--scc-paper);
	border: 1px solid var(--scc-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(16, 24, 40, .12), 0 2px 8px rgba(16, 24, 40, .05);
}

.scc-chat__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 84px;
	padding: 18px 24px;
	background:
		radial-gradient(circle at 92% 12%, rgba(124, 58, 237, .32), transparent 32%),
		linear-gradient(115deg, #16233c 0%, #1c3358 60%, #24406e 100%);
	color: #fff;
}

.scc-chat__identity {
	display: flex;
	align-items: center;
	gap: 13px;
	min-width: 0;
}

.scc-chat__mark {
	flex: 0 0 45px;
	width: 45px;
	height: 45px;
	padding: 12px;
	background: var(--scc-grad);
	color: #fff;
	border-radius: 14px 14px 14px 4px;
}

.scc-chat__identity h2 {
	margin: 0 0 3px;
	color: #fff;
	font-size: 20px;
	font-weight: 760;
	line-height: 1.2;
	letter-spacing: -.015em;
}

.scc-chat__connection {
	display: flex;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, .67);
	font-size: 12px;
	font-weight: 650;
	letter-spacing: .035em;
	text-transform: uppercase;
}

.scc-chat__connection-dot {
	width: 7px;
	height: 7px;
	background: #f0b75a;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(240, 183, 90, .12);
}

.scc-chat.is-connected .scc-chat__connection-dot {
	background: var(--scc-blue);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);
}

.scc-roster-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	cursor: pointer;
}

.scc-roster-toggle__dot {
	width: 8px;
	height: 8px;
	background: var(--scc-blue);
	border-radius: 50%;
}

.scc-chat__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 255px;
	height: clamp(560px, 72vh, 700px);
	min-height: 0;
}

.scc-conversation {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto auto auto;
	min-width: 0;
	min-height: 0;
	background: var(--scc-paper);
}

/* Pin each child to its intended row. Three of these five are hidden in the
   normal state, and grid auto-placement shifts the visible ones up - which
   put the COMPOSER in the stretchy 1fr row, ballooning it to fill the card
   with empty space below the input. Explicit rows keep the transcript as
   the flexible region no matter which siblings are showing. */
.scc-conversation > .scc-pinned { grid-row: 1; }
.scc-conversation > .scc-transcript { grid-row: 2; }
.scc-conversation > .scc-typing { grid-row: 3; }
.scc-conversation > .scc-composer-context { grid-row: 4; }
.scc-conversation > .scc-composer { grid-row: 5; }

/* Transcript and messages. */
.scc-transcript {
	position: relative;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: #cbc7d9 transparent;
	overscroll-behavior: contain;
	background:
		linear-gradient(rgba(255,255,255,.91), rgba(255,255,255,.91)),
		radial-gradient(circle at 20% 15%, #e5ddff 0 1px, transparent 1.5px);
	background-size: auto, 18px 18px;
}

.scc-transcript:focus-visible {
	outline: 3px solid rgba(109, 61, 245, .28);
	outline-offset: -3px;
}

.scc-transcript::-webkit-scrollbar { width: 10px; }
.scc-transcript::-webkit-scrollbar-track { background: transparent; }
.scc-transcript::-webkit-scrollbar-thumb {
	background: #cbc7d9;
	border: 3px solid transparent;
	border-radius: 999px;
	background-clip: content-box;
}

.scc-history-control {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	min-height: 18px;
	padding: 10px 16px 0;
	pointer-events: none;
}

.scc-history-button {
	padding: 7px 13px;
	border: 1px solid var(--scc-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 5px 18px rgba(36, 27, 67, .09);
	color: var(--scc-violet-dark);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	pointer-events: auto;
}

.scc-history-button:hover { border-color: #c6b9f7; }
.scc-history-button:disabled { cursor: wait; opacity: .65; }

.scc-message-log {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: calc(100% - 28px);
	padding: 8px 22px 22px;
}

.scc-chat__loading,
.scc-chat__empty {
	display: grid;
	place-items: center;
	flex: 1;
	min-height: 320px;
	padding: 36px;
	color: var(--scc-muted);
	font-size: 14px;
	text-align: center;
}

.scc-message {
	position: relative;
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 10px;
	padding: 11px 10px;
	border-radius: 14px;
	transition: background-color .16s ease;
}

.scc-message:hover,
.scc-message:focus-within {
	background: rgba(247, 246, 250, .92);
}

.scc-message.is-mine {
	background: linear-gradient(90deg, rgba(238, 233, 255, .62), rgba(255, 255, 255, .12));
}

.scc-message.is-highlighted {
	background: #fff7cf;
	box-shadow: inset 3px 0 0 #e8b63a;
}

.scc-message__avatar,
.scc-roster-member__avatar {
	display: block;
	object-fit: cover;
	background: #eceaf2;
	border-radius: 50%;
}

.scc-message__avatar {
	width: 38px;
	height: 38px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #dedbe8;
}

.scc-message__main { min-width: 0; }

.scc-message__meta {
	display: flex;
	align-items: baseline;
	gap: 7px;
	min-width: 0;
	margin-bottom: 3px;
}

.scc-message__name {
	max-width: 45%;
	overflow: hidden;
	color: var(--scc-ink);
	font-size: 13px;
	font-weight: 760;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scc-message__handle {
	max-width: 28%;
	overflow: hidden;
	color: var(--scc-violet);
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scc-message__time {
	margin-left: auto;
	color: var(--scc-muted);
	font-size: 11px;
	white-space: nowrap;
}

.scc-message__edited {
	color: var(--scc-muted);
	font-size: 10px;
	font-style: normal;
}

.scc-message__quote {
	display: block;
	width: 100%;
	margin: 5px 0 7px;
	padding: 7px 10px;
	border: 0;
	border-left: 3px solid #b7a2ff;
	border-radius: 0 8px 8px 0;
	background: var(--scc-violet-soft);
	color: var(--scc-ink-soft);
	text-align: left;
	cursor: pointer;
}

.scc-message__quote strong,
.scc-message__quote span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scc-message__quote strong {
	margin-bottom: 1px;
	color: var(--scc-violet-dark);
	font-size: 11px;
}

.scc-message__quote span { font-size: 12px; }

.scc-message__body {
	color: #282b37;
	font-size: 14px;
	line-height: 1.55;
	word-break: break-word;
	white-space: pre-wrap;
}

.scc-message__body a {
	color: var(--scc-violet-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(109, 61, 245, .3);
	text-underline-offset: 2px;
}

.scc-message__mention {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--scc-violet-dark);
	font-weight: 700;
	cursor: pointer;
}

.scc-message__tag {
	color: var(--scc-violet-dark);
	font-weight: 650;
}

.scc-message.is-deleted .scc-message__body {
	color: var(--scc-muted);
	font-style: italic;
}

.scc-message__actions {
	display: flex;
	align-items: center;
	gap: 3px;
	min-height: 27px;
	margin-top: 5px;
}

.scc-message__action {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 27px;
	padding: 3px 7px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--scc-muted);
	font-size: 11px;
	font-weight: 650;
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease;
}

.scc-message__action:hover,
.scc-message__action:focus-visible {
	background: #ebe8f4;
	color: var(--scc-ink);
}

.scc-message__action.is-reacted {
	background: #fff0f3;
	color: #d4304f;
}

.scc-message__action[data-action="delete"]:hover,
.scc-message__action[data-action="delete"]:focus-visible {
	background: #fff0f1;
	color: var(--scc-danger);
}

.scc-message__action:disabled {
	cursor: default;
	opacity: .55;
}

.scc-new-messages {
	position: sticky;
	left: 50%;
	bottom: 12px;
	z-index: 4;
	transform: translateX(-50%);
	margin-left: 50%;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--scc-violet);
	box-shadow: 0 8px 24px rgba(82, 35, 215, .28);
	color: #fff;
	font-size: 12px;
	font-weight: 750;
	cursor: pointer;
}

/* Composer. */
.scc-composer-context {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 16px 8px 20px;
	border-top: 1px solid var(--scc-line);
	background: #f4f0ff;
}

.scc-composer-context__eyebrow,
.scc-composer-context strong { display: block; }

.scc-composer-context__eyebrow {
	color: var(--scc-violet);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.scc-composer-context strong {
	max-width: 540px;
	overflow: hidden;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scc-composer-context button {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--scc-ink-soft);
	font-size: 21px;
	cursor: pointer;
}

.scc-composer-context button:hover { background: #e7dfff; }

.scc-composer {
	position: relative;
	padding: 14px 16px 13px;
	border-top: 1px solid var(--scc-line);
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 -8px 24px rgba(35, 27, 60, .04);
}

.scc-composer__input-wrap { position: relative; }

.scc-composer textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	max-height: 138px;
	padding: 10px 13px;
	resize: none;
	border: 1px solid #d9d6e3;
	border-radius: 13px;
	outline: none;
	background: var(--scc-wash);
	color: var(--scc-ink);
	font-size: 14px;
	line-height: 1.55;
	transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.scc-composer textarea:focus {
	border-color: #9a7cf7;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(109, 61, 245, .10);
}

.scc-composer textarea::placeholder { color: #9b9eaa; }

.scc-composer__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 9px;
}

.scc-composer__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: var(--scc-muted);
	font-size: 10px;
}

.scc-composer__count { white-space: nowrap; }
.scc-composer__count.is-over { color: var(--scc-danger); font-weight: 750; }

.scc-support-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 10px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--scc-muted);
	cursor: pointer;
	user-select: none;
}
.scc-support-check input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--scc-blue);
	cursor: pointer;
}
.scc-support-check:hover { color: var(--scc-blue); }
.scc-support-check input:checked + span { color: var(--scc-blue); }
@media (pointer: coarse) {
	.scc-support-check { min-height: 44px; }
}

.scc-composer__error.is-ok {
	color: var(--scc-success);
	background: rgba(15, 157, 88, .08);
	border-color: rgba(15, 157, 88, .3);
}

.scc-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 92px;
	min-height: 38px;
	padding: 0 15px;
	border: 0;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--scc-blue), var(--scc-violet));
	box-shadow: 0 6px 16px rgba(82, 35, 215, .23);
	color: #fff;
	font-size: 12px;
	font-weight: 760;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.scc-send svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.scc-send:hover {
	transform: translateY(-1px);
	box-shadow: 0 9px 20px rgba(82, 35, 215, .3);
}

.scc-send:disabled { cursor: wait; opacity: .58; transform: none; }

.scc-composer__error {
	margin-top: 8px;
	padding: 7px 10px;
	border-radius: 8px;
	background: #fff0f1;
	color: var(--scc-danger);
	font-size: 11px;
}

.scc-mentions {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 7px);
	z-index: 8;
	max-height: 230px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid #dcd8e8;
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 16px 38px rgba(36, 27, 67, .17);
}

.scc-mention-option {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 8px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--scc-ink);
	text-align: left;
	cursor: pointer;
}

.scc-mention-option:hover,
.scc-mention-option.is-active { background: var(--scc-violet-soft); }

.scc-mention-option img {
	width: 31px;
	height: 31px;
	object-fit: cover;
	border-radius: 50%;
}

.scc-mention-option span { display: block; min-width: 0; }
.scc-mention-option strong,
.scc-mention-option small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.scc-mention-option strong { font-size: 12px; }
.scc-mention-option small { color: var(--scc-muted); font-size: 10px; }

/* Presence sidebar. */
.scc-roster {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	padding: 20px 15px 14px;
	border-left: 1px solid var(--scc-line);
	background:
		radial-gradient(circle at 80% 5%, rgba(37, 99, 235, .16), transparent 23%),
		#f5f3f8;
}

.scc-roster__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 5px 15px;
	border-bottom: 1px solid #e1dfe8;
}

.scc-roster__eyebrow {
	display: block;
	margin-bottom: 1px;
	color: var(--scc-muted);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.scc-roster__header h3 {
	margin: 0;
	color: var(--scc-ink);
	font-size: 17px;
	line-height: 1.2;
}

.scc-roster__pulse {
	position: relative;
	width: 10px;
	height: 10px;
	background: var(--scc-success);
	border-radius: 50%;
}

.scc-roster__pulse::after {
	position: absolute;
	inset: -5px;
	border: 1px solid rgba(49, 183, 122, .36);
	border-radius: 50%;
	content: "";
	animation: scc-pulse 2.2s ease-out infinite;
}

.scc-roster.is-stale .scc-roster__pulse {
	background: #a7a3b2;
}

.scc-roster.is-stale .scc-roster__pulse::after {
	display: none;
}

@keyframes scc-pulse {
	0% { opacity: .9; transform: scale(.55); }
	70%, 100% { opacity: 0; transform: scale(1.2); }
}

.scc-roster__list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 10px 0;
}

.scc-roster__loading,
.scc-roster__empty {
	padding: 24px 8px;
	color: var(--scc-muted);
	font-size: 11px;
	text-align: center;
}

.scc-roster-member {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 7px 6px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--scc-ink);
	text-align: left;
	cursor: pointer;
}

.scc-roster-member:hover,
.scc-roster-member:focus-visible { background: #ebe7f2; }

.scc-roster-member__avatar-wrap { position: relative; flex: 0 0 auto; }
.scc-roster-member__avatar { width: 34px; height: 34px; }
.scc-roster-member__status {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 10px;
	height: 10px;
	border: 2px solid #f5f3f8;
	border-radius: 50%;
	background: var(--scc-success);
}

.scc-roster-member__info { min-width: 0; }
.scc-roster-member__name,
.scc-roster-member__handle {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.scc-roster-member__name { font-size: 12px; font-weight: 720; }
.scc-roster-member__handle { color: var(--scc-muted); font-size: 10px; }
.scc-roster-member__you {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 5px;
	border-radius: 999px;
	background: var(--scc-violet-soft);
	color: var(--scc-violet-dark);
	font-size: 8px;
	font-weight: 800;
	text-transform: uppercase;
}

.scc-roster__note {
	margin: auto 3px 0;
	padding-top: 10px;
	border-top: 1px solid #e1dfe8;
	color: var(--scc-muted);
	font-size: 9px;
	text-align: center;
}

/* Report dialog. */
.scc-report-dialog {
	width: min(92vw, 470px);
	max-width: 470px;
	padding: 0;
	border: 0;
	border-radius: 19px;
	background: #fff;
	box-shadow: 0 30px 90px rgba(24, 18, 44, .28);
	color: var(--scc-ink);
}

.scc-report-dialog::backdrop { background: rgba(19, 14, 34, .58); backdrop-filter: blur(3px); }
.scc-report-form { padding: 24px; }
.scc-report-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
}
.scc-report-dialog__head span {
	display: block;
	color: var(--scc-violet);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.scc-report-dialog__head h3 { margin: 2px 0 0; font-size: 21px; }
.scc-report-dialog__head button {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--scc-wash);
	color: var(--scc-ink-soft);
	font-size: 22px;
	cursor: pointer;
}
.scc-report-form > p { margin: 0 0 17px; color: var(--scc-ink-soft); font-size: 12px; }
.scc-report-form fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.scc-report-form legend { margin-bottom: 8px; font-size: 12px; font-weight: 760; }
.scc-report-form fieldset label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 11px;
	border: 1px solid var(--scc-line);
	border-radius: 9px;
	font-size: 12px;
	cursor: pointer;
}
.scc-report-form fieldset label:has(input:checked) { border-color: #a68cf7; background: var(--scc-violet-soft); }
.scc-report-details { display: block; margin-top: 15px; }
.scc-report-details span { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; }
.scc-report-details textarea {
	width: 100%;
	padding: 9px 11px;
	resize: vertical;
	border: 1px solid var(--scc-line);
	border-radius: 9px;
	outline: 0;
}
.scc-report-details textarea:focus { border-color: #9a7cf7; box-shadow: 0 0 0 3px rgba(109, 61, 245, .1); }
.scc-report-dialog__actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.scc-report-dialog__actions button { min-height: 39px; padding: 0 15px; border-radius: 9px; font-size: 12px; font-weight: 720; cursor: pointer; }
.scc-report-cancel { border: 1px solid var(--scc-line); background: #fff; color: var(--scc-ink-soft); }
.scc-report-submit { border: 0; background: var(--scc-violet); color: #fff; }
.scc-report-submit:disabled { opacity: .55; cursor: wait; }
.scc-report-dialog__error { margin-top: 10px; color: var(--scc-danger); font-size: 11px; }
.scc-noscript { padding: 12px 20px; background: #fff4d7; color: #704f00; font-size: 12px; }

/* Version 1.1 controls, announcements, files, and search. */
.scc-chat__toolbar { display: flex; align-items: center; gap: 8px; }
.scc-header-action {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #fff;
	cursor: pointer;
}
.scc-header-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.scc-unread-badge { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: var(--scc-blue); color: #fff; font-size: 11px; font-weight: 800; text-align: center; }

.scc-search-panel { padding: 14px 18px; border-bottom: 1px solid var(--scc-line); background: #faf9fc; }
.scc-search-panel form { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
.scc-search-panel input { min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #d9d6e3; border-radius: 10px; outline: 0; }
.scc-search-panel input:focus { border-color: #9a7cf7; box-shadow: 0 0 0 3px rgba(109,61,245,.1); }
.scc-search-panel form button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--scc-violet); color: #fff; cursor: pointer; }
.scc-search-panel form button:last-child { width: 40px; padding: 0; background: #ece9f2; color: var(--scc-ink); font-size: 21px; }
.scc-search-results { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; margin-top: 10px; }
.scc-search-result { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: #fff; color: var(--scc-ink); text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.scc-search-result:hover { background: var(--scc-violet-soft); }
.scc-search-result img { width: 34px; height: 34px; border-radius: 50%; }
.scc-search-result strong,.scc-search-result span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scc-search-result span,.scc-search-result time { color: var(--scc-muted); font-size: 11px; }

.scc-pinned { max-height: 150px; overflow: hidden; padding: 9px 14px; border-bottom: 1px solid #ded7f2; background: linear-gradient(90deg,#fff8d9,#f3edff); }
.scc-pinned.is-collapsed { max-height: 41px; }
.scc-pinned__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: #60431a; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.scc-pinned__head button { border: 0; background: transparent; color: var(--scc-violet-dark); font-size: 10px; cursor: pointer; }
.scc-pinned-item { display: flex; gap: 8px; align-items: center; width: 100%; padding: 5px 7px; border: 0; border-radius: 8px; background: rgba(255,255,255,.65); color: var(--scc-ink); text-align: left; cursor: pointer; }
.scc-pinned-item + .scc-pinned-item { margin-top: 4px; }
.scc-pinned-item__badge { flex: 0 0 auto; color: var(--scc-violet-dark); font-size: 11px; font-weight: 800; }
.scc-pinned-item__text { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.scc-message.is-announcement { background: linear-gradient(90deg,#fff8d7,#fff); box-shadow: inset 3px 0 0 #efb83d; }
.scc-message__pin-label { display: inline-block; margin-right: 6px; color: #8a6017; font-size: 10px; font-weight: 800; text-transform: uppercase; }

.scc-typing { min-height: 24px; padding: 4px 20px; border-top: 1px solid #f0edf4; color: var(--scc-muted); font-size: 11px; font-style: italic; }
.scc-composer__tools { display: flex; gap: 5px; }
.scc-tool-button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--scc-line); border-radius: 9px; background: #fff; color: var(--scc-ink-soft); font-size: 18px; cursor: pointer; }
.scc-tool-button:hover { background: var(--scc-violet-soft); color: var(--scc-violet-dark); }
.scc-emoji-picker { position: absolute; left: 0; bottom: calc(100% + 7px); z-index: 9; display: grid; grid-template-columns: repeat(8, 34px); gap: 3px; padding: 9px; border: 1px solid #dcd8e8; border-radius: 13px; background: #fff; box-shadow: 0 16px 38px rgba(36,27,67,.17); }
.scc-emoji-picker button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 20px; cursor: pointer; }
.scc-emoji-picker button:hover { background: var(--scc-violet-soft); }
.scc-attachment-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; padding: 9px 11px; border: 1px solid #dcd8e8; border-radius: 10px; background: #f8f6fc; font-size: 12px; }
.scc-attachment-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.scc-attachment-preview button { border: 0; background: transparent; color: var(--scc-danger); cursor: pointer; }
.scc-message__attachment { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--scc-line); border-radius: 10px; background: #fff; color: var(--scc-violet-dark); text-decoration: none; }
.scc-message__attachment img { width: 76px; height: 58px; object-fit: cover; border-radius: 7px; }
.scc-message__attachment strong,.scc-message__attachment small { display: block; overflow: hidden; max-width: 280px; text-overflow: ellipsis; white-space: nowrap; }
.scc-message__attachment small { color: var(--scc-muted); }
.scc-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; }
.scc-reaction-chip { padding: 3px 7px; border: 1px solid var(--scc-line); border-radius: 999px; background: #fff; font-size: 12px; cursor: pointer; }
.scc-reaction-chip.is-reacted { border-color: #a993ef; background: var(--scc-violet-soft); }
.scc-reaction-picker { position: relative; }
.scc-reaction-picker__menu { position: absolute; left: 0; bottom: calc(100% + 5px); z-index: 7; display: flex; gap: 3px; padding: 5px; border: 1px solid var(--scc-line); border-radius: 999px; background: #fff; box-shadow: 0 8px 22px rgba(36,27,67,.16); }
.scc-reaction-picker__menu button { width: 31px; height: 31px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 18px; cursor: pointer; }
.scc-reaction-picker__menu button:hover { background: var(--scc-violet-soft); }

/* Unified keyboard focus. */
.scc-chat button:focus-visible,
.scc-login-gate a:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .6);
	outline-offset: 2px;
}

.scc-chat [hidden],
.scc-login-gate[hidden] { display: none !important; }

@media (max-width: 780px) {
	.scc-chat { margin: 18px auto; border-radius: 18px; }
	.scc-chat__header { min-height: 74px; padding: 14px 16px; }
	.scc-chat__mark { flex-basis: 40px; width: 40px; height: 40px; padding: 10px; }
	.scc-chat__identity h2 { font-size: 17px; }
	.scc-roster-toggle { display: inline-flex; }
	.scc-chat__grid { display: block; height: auto; }
	.scc-conversation { height: min(76vh, 670px); min-height: 510px; }
	.scc-roster {
		display: none;
		max-height: 280px;
		border-top: 1px solid var(--scc-line);
		border-left: 0;
	}
	.scc-roster.is-open { display: flex; }
	.scc-roster__list { max-height: 180px; }
	.scc-message-log { padding-right: 10px; padding-left: 10px; }
	.scc-message { padding-right: 6px; padding-left: 6px; }
	.scc-composer { padding-right: 11px; padding-left: 11px; }
	.scc-composer__meta > span:first-child { display: none; }
	.scc-message__handle { display: none; }
	.scc-message__name { max-width: 62%; }
}

@media (max-width: 480px) {
	.scc-chat { width: calc(100% + 20px); margin-right: -10px; margin-left: -10px; border-radius: 16px; }
	.scc-chat__header { padding: 12px; }
	.scc-chat__connection { font-size: 10px; }
	.scc-roster-toggle { padding: 7px 9px; font-size: 11px; }
	.scc-conversation { height: min(78vh, 640px); }
	.scc-message { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
	.scc-message__avatar { width: 32px; height: 32px; }
	.scc-message__actions { gap: 0; }
	.scc-message__action { padding-right: 6px; padding-left: 6px; }
	.scc-search-panel { padding-right: 10px; padding-left: 10px; }
	.scc-search-panel form { grid-template-columns: minmax(0, 1fr) auto; }
	.scc-search-panel form button:last-child { grid-column: 2; grid-row: 1; }
	.scc-search-panel form button[type="submit"] { grid-column: 1 / -1; grid-row: 2; }
	.scc-emoji-picker { grid-template-columns: repeat(6, 34px); max-height: 190px; overflow-y: auto; }
	.scc-message__attachment strong,
	.scc-message__attachment small { max-width: 170px; }
	.scc-send { min-width: 76px; }
	.scc-send svg { display: none; }
	.scc-login-gate { margin: 20px auto; padding: 38px 20px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.scc-chat *,
	.scc-login-gate * {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}