/* Charta 3.9.0 — mobile interaction and message governance */
:root{
	--charta-edu-blue:#2457e6;
	--charta-ai-cyan:#10b8d4;
	--charta-ai-violet:#7657ee;
	--charta-youth-coral:#ff785d;
	--charta-soft-bg:#f4f7fc;
	--charta-card-border:#dfe7f3;
}

/* The personalized task block is intentionally removed from the public homepage. */
body.home .charta-learning-home,
body.front-page .charta-learning-home{display:none!important}

/* Unified message center: quieter hierarchy, clearer active states. */
.clc-message-center{
	--clc-chat-accent:var(--charta-edu-blue);
	--clc-chat-accent-soft:rgba(36,87,230,.09);
}
.clc-message-summary{
	position:sticky;
	top:76px;
	z-index:18;
	padding:8px;
	border:1px solid var(--charta-card-border);
	border-radius:18px;
	background:rgba(255,255,255,.92);
	box-shadow:0 14px 38px rgba(31,54,92,.08);
	backdrop-filter:blur(14px);
}
.clc-message-summary button{
	min-height:46px;
	border-radius:13px;
	transition:background .18s ease,color .18s ease,transform .18s ease;
}
.clc-message-summary button:hover{transform:translateY(-1px)}
.clc-message-summary button.is-active{
	background:linear-gradient(135deg,var(--charta-edu-blue),var(--charta-ai-violet));
	color:#fff;
	box-shadow:0 10px 24px rgba(60,76,200,.22);
}
.clc-chat-layout{
	min-height:650px;
	border:1px solid var(--charta-card-border);
	border-radius:24px;
	background:#fff;
	box-shadow:0 18px 50px rgba(34,57,94,.09);
	overflow:hidden;
}
.clc-conversation-item.is-active{
	background:linear-gradient(135deg,rgba(36,87,230,.10),rgba(16,184,212,.08));
	box-shadow:inset 3px 0 var(--charta-edu-blue);
}
.clc-chat-room-head{
	background:linear-gradient(180deg,#fff,#f8faff);
	border-bottom:1px solid #e5ebf4;
}
.clc-chat-announcement{
	border:1px solid rgba(255,176,32,.28);
	background:linear-gradient(135deg,#fff9e8,#fffdf6);
}
.clc-chat-message.is-highlighted{animation:charta-message-highlight 1.8s ease}
@keyframes charta-message-highlight{
	0%,100%{box-shadow:none}
	35%{box-shadow:0 0 0 5px rgba(36,87,230,.14)}
}
.clc-chat-searchbar,
.clc-chat-group-controls,
.clc-chat-reply-preview{
	border-color:#dce5f1;
	background:#f7f9fd;
}
.clc-message-report-note{color:#7e8b9d;font-size:12px}

/* Role center layout remains predictable when new cards are added. */
.clc-learning-app,
.clc-teacher-front,
.clc-role-workspace{
	align-items:start;
}
.clc-center-main,
.clc-workspace-main,
.clc-teacher-front__main{min-width:0}
.clc-center-aside,
.clc-workspace-aside,
.clc-teacher-front__aside{align-self:start}
.clc-case-leaderboard,
.clc-case-showcase-board{clear:both;width:100%}

/* Content lists and filters are easier to scan. */
.clc-content-filter,
.clc-gallery-filter{
	display:flex;
	gap:8px;
	padding:7px;
	border:1px solid var(--charta-card-border);
	border-radius:15px;
	background:#fff;
	overflow-x:auto;
	scrollbar-width:thin;
}
.clc-content-filter a,
.clc-gallery-filter a{flex:0 0 auto;border-radius:10px}

@media(max-width:1100px){
	.clc-message-summary{top:62px}
	.clc-chat-layout{grid-template-columns:minmax(250px,34%) minmax(0,1fr)}
	.clc-chat-info{display:none}
	.clc-center-aside,
	.clc-workspace-aside,
	.clc-teacher-front__aside{position:static!important;top:auto!important}
}

@media(max-width:782px){
	.clc-message-center{padding-inline:12px}
	.clc-chat-page-header{align-items:flex-start;gap:14px}
	.clc-message-summary{
		position:relative;
		top:auto;
		display:grid;
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:6px;
		border-radius:16px;
	}
	.clc-message-summary button{justify-content:center;padding-inline:8px}
	.clc-chat-layout{
		position:relative;
		display:block;
		min-height:calc(100dvh - 185px);
		border-radius:18px;
	}
	.clc-chat-sidebar,
	.clc-chat-room{width:100%;min-height:calc(100dvh - 190px)}
	.clc-chat-room{display:none}
	.clc-message-center.is-room-open .clc-chat-sidebar{display:none}
	.clc-message-center.is-room-open .clc-chat-room{display:flex}
	.clc-chat-room-head{position:sticky;top:0;z-index:8}
	.clc-chat-message-list{padding:16px 12px 118px}
	.clc-chat-composer{
		position:sticky;
		bottom:0;
		z-index:9;
		padding:10px 10px max(10px,env(safe-area-inset-bottom));
		background:rgba(255,255,255,.96);
		backdrop-filter:blur(16px);
	}
	.clc-chat-composer textarea{min-height:44px;max-height:126px}
	.clc-chat-group-controls{grid-template-columns:1fr}
	.clc-chat-group-controls textarea{min-height:72px}

	/* Consistent mobile order: identity → primary tasks → alerts → growth → cases. */
	.clc-learning-app,
	.clc-teacher-front,
	.clc-role-workspace{display:flex!important;flex-direction:column!important;gap:14px!important}
	.clc-center-header,
	.clc-workspace-header,
	.clc-teacher-front__header{order:1}
	.clc-center-main,
	.clc-workspace-main,
	.clc-teacher-front__main{order:2;width:100%}
	.clc-center-aside,
	.clc-workspace-aside,
	.clc-teacher-front__aside{order:3;width:100%}
	.clc-case-leaderboard,
	.clc-case-showcase-board{order:4;width:100%}
	.clc-dashboard-grid,
	.clc-growth-grid,
	.clc-impact-grid{grid-template-columns:1fr!important}
}

@media(max-width:480px){
	.clc-message-summary{grid-template-columns:1fr 1fr}
	.clc-chat-page-header h1{font-size:26px}
	.clc-chat-page-actions{width:100%;justify-content:space-between}
	.clc-conversation-item{padding:11px 10px}
	.clc-chat-bubble{max-width:84%}
	.clc-chat-message img{max-height:280px;object-fit:contain}
}

@media(prefers-reduced-motion:reduce){
	.clc-chat-message.is-highlighted{animation:none;outline:3px solid rgba(36,87,230,.18)}
	.clc-message-summary button{transition:none}
}


/* 3.9.1 messaging page must not inherit the public two-column sidebar template. */
body.clc-messaging-page .site-content>.wp-block-columns{
	display:block!important;
	width:100%!important;
	max-width:none!important;
}
body.clc-messaging-page .site-content>.wp-block-columns>.post-wrapper{
	width:100%!important;
	max-width:none!important;
	flex-basis:100%!important;
}
body.clc-messaging-page .site-content>.wp-block-columns>.sidebar-wrapper{display:none!important}
body.clc-messaging-page .clc-message-center{width:min(calc(100% - 24px),1760px)!important;max-width:1760px!important}
@media(min-width:1201px) and (max-width:1500px){
	body.clc-messaging-page .clc-chat-layout{grid-template-columns:minmax(230px,270px) minmax(0,1fr)!important}
	body.clc-messaging-page .clc-chat-info{display:none!important}
}
@media(max-width:1100px){
	body.clc-messaging-page .clc-chat-layout{grid-template-columns:minmax(220px,30%) minmax(0,1fr)!important}
}