/* SP Community 聊天室 —— 紧凑 shoutbox 风格，清新主题色 */
.spc-chat {
	--ca: var(--theme-color, #1fc4a7);
	background: var(--main-bg-color, #fff);
	border: 1px solid var(--main-border-color, rgba(50,50,50,.08));
	border-radius: var(--main-radius, 12px);
	overflow: hidden; display: flex; flex-direction: column;
	box-shadow: 0 4px 18px rgba(50,60,80,.06);
}
.spc-chat * { box-sizing: border-box; }
.spc-chat-head {
	padding: 11px 16px; font-weight: 600; color: var(--key-color, #333);
	border-bottom: 1px solid var(--main-border-color, rgba(50,50,50,.06));
	display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
}
.spc-chat-online { font-size: 12px; font-weight: 400; color: var(--ca); }

.spc-chat-msgs {
	height: 60vh; overflow-y: auto; padding: 10px 16px;
	background: var(--body-bg-color, #f7f8fa);
	display: flex; flex-direction: column; gap: 3px; /* 紧凑 */
}
.spc-chat-tip { text-align: center; color: var(--muted-2-color, #999); font-size: 13px; margin: auto; }

/* 一行：时间 + 用户名(可点) + 内容 */
.spc-cm { font-size: 14px; line-height: 1.65; color: var(--main-color, #4e5358); word-break: break-word; }
.spc-cm-time { color: var(--muted-3-color, #b1b1b1); font-size: 12px; margin-right: 7px; }
.spc-cm-name { color: var(--ca); font-weight: 600; text-decoration: none; }
.spc-cm-name:hover { text-decoration: underline; }
.spc-cm-colon { color: var(--muted-2-color, #999); }
.spc-cm.mine .spc-cm-name { color: #ef7aa8; } /* 自己的名字换个色，便于区分 */

.spc-chat-bar {
	display: flex; gap: 8px; padding: 10px 12px; flex: 0 0 auto;
	border-top: 1px solid var(--main-border-color, rgba(50,50,50,.06)); background: var(--main-bg-color, #fff);
}
.spc-chat-text {
	flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 999px;
	border: 1px solid var(--main-border-color, rgba(0,0,0,.12)); font-size: 14px;
	color: var(--main-color, #4e5358); background: var(--body-bg-color, #f7f8fa); outline: none;
}
.spc-chat-text:focus { border-color: var(--ca); }
.spc-chat-send {
	flex: 0 0 auto; padding: 0 20px; height: 40px; border: none; border-radius: 999px; cursor: pointer;
	background: var(--ca); color: #fff; font-size: 14px; font-weight: 600;
}
.spc-chat-send:disabled { opacity: .5; cursor: default; }