/* ==========================================================================
   Skeleton Loading System (v11)
   Reusable shimmer placeholders — light theme only.
   Primitives: .skel-circle / .skel-line / .skel-rect / .skel-pill / .skel-btn / .skel-input
   Layout wrappers mirror the real component's structure 1:1 so swapping the
   skeleton for real content never shifts layout (see js/skeleton.js for the
   matching composite builder functions).
   ========================================================================== */

.skeleton-base,
.skel-circle,
.skel-line,
.skel-rect,
.skel-pill,
.skel-btn,
.skel-input {
	background-color: #D2D2D2;
	background-image: linear-gradient(
		90deg,
		#D2D2D2 25%,
		#E2E2E2 38%,
		rgba(255, 255, 255, .85) 50%,
		#E2E2E2 62%,
		#D2D2D2 75%
	);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: skeleton_shimmer 1.4s ease-in-out infinite;
	will-change: background-position;
	display: block;
	border: 0;
}

@keyframes skeleton_shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

/* RTL direction is applied per-element as an inline style (see dirStyle() in
   js/skeleton.js), checked fresh at the moment each skeleton is built —
   not here, since a page-load-time class proved unreliable to time correctly. */

@media (prefers-reduced-motion: reduce) {
	.skeleton-base,
	.skel-circle,
	.skel-line,
	.skel-rect,
	.skel-pill,
	.skel-btn,
	.skel-input {
		animation: none;
		background-image: none;
		background-color: #D2D2D2;
	}
}

/* ---- Shape primitives ---- */

.skel-circle {
	border-radius: 50%;
	flex-shrink: 0;
}

.skel-line {
	border-radius: 4px;
	height: 11px;
}

.skel-rect {
	border-radius: 8px;
}

.skel-pill {
	border-radius: 999px;
}

.skel-btn {
	border-radius: 6px;
}

.skel-input {
	border-radius: 6px;
	width: 100%;
}

/* Common avatar sizes found across the app (chat row / user+room row / profile) */
.skel-circle--27 { width: 27px; height: 27px; }
.skel-circle--30 { width: 30px; height: 30px; }
.skel-circle--36 { width: 36px; height: 36px; }
.skel-circle--40 { width: 40px; height: 40px; }

/* Room/icon rounded-square (matches .room_cicon: 30x30, small radius, not a circle) */
.skel-rect--icon30 {
	width: 30px;
	height: 30px;
	border-radius: 6px;
}

/* ---- Chat message row (mirrors chatLogTemplate(), js/function_temp.js) ---- */

.skeleton-chat-row {
	direction: rtl;
	display: table;
	table-layout: fixed;
	width: 100%;
	padding: 6px 8px;
	box-sizing: border-box;
}

.skeleton-chat-row .skel-chat-avatar-cell {
	display: table-cell;
	vertical-align: top;
	width: 35px;
	padding-top: 2px;
}

.skeleton-chat-row .skel-chat-body-cell {
	display: table-cell;
	vertical-align: top;
	padding: 0 8px;
}

.skeleton-chat-row .skel-chat-name {
	width: 40%;
	margin-bottom: 6px;
}

.skeleton-chat-row .skel-chat-message {
	width: 75%;
}

/* ---- Online users / userlist row (mirrors .user_item, css/main.css:140-150) ---- */

.skeleton-user-row {
	direction: rtl;
	display: table;
	table-layout: fixed;
	width: 100%;
	padding: 5px 8px;
	box-sizing: border-box;
}

.skeleton-user-row .skel-user-avatar-cell {
	display: table-cell;
	vertical-align: middle;
	width: 36px;
}

.skeleton-user-row .skel-user-data-cell {
	display: table-cell;
	vertical-align: middle;
	padding: 0 8px;
}

.skeleton-user-row .skel-user-name {
	width: 60%;
	margin-bottom: 6px;
}

.skeleton-user-row .skel-user-status {
	width: 35%;
	height: 9px;
}

/* ---- Rooms list row (mirrors .in_room_element, js/function_temp.js:1339) ---- */

.skeleton-room-row {
	direction: rtl;
	padding-right: 10px;
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 40px;
	box-sizing: border-box;
}

.skeleton-room-row .skel-room-icon-cell {
	display: table-cell;
	vertical-align: middle;
	width: 44px;
	text-align: center;
}

.skeleton-room-row .skel-room-name-cell {
	display: table-cell;
	vertical-align: middle;
	padding: 0 8px;
}

.skeleton-room-row .skel-room-name {
	width: 55%;
}

.skeleton-room-row .skel-room-count-cell {
	display: table-cell;
	vertical-align: middle;
	width: 50px;
	padding: 0 8px;
}

/* ---- Social post — shared by wall posts AND news cards, since both use the
   identical .post_element/.post_avatar/.post_title/.post_content/.post_control
   structure (system/element/wall_post.php, system/element/news.php):
   avatar + name + date + options dot, content text, optional media, then a
   like-button + comment-count row. ---- */

.skeleton-wall-post {
	direction: rtl;
	display: table;
	table-layout: fixed;
	width: 100%;
	height: auto;
	padding: 15px 0;
	box-sizing: border-box;
}

.skeleton-wall-post .skel-post-avatar-cell {
	display: table-cell;
	vertical-align: top;
	width: 36px;
}

.skeleton-wall-post .skel-post-content-cell {
	display: table-cell;
	vertical-align: top;
	padding: 0 10px;
}

.skeleton-wall-post .skel-post-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.skeleton-wall-post .skel-post-head-text {
	flex: 1 1 auto;
	min-width: 0;
}

.skeleton-wall-post .skel-post-name {
	width: 60%;
	margin-bottom: 6px;
}

.skeleton-wall-post .skel-post-date {
	width: 30%;
}

.skeleton-wall-post .skel-post-line {
	margin-bottom: 6px;
}

.skeleton-wall-post .skel-post-media {
	width: 100%;
	height: 140px;
	margin-top: 8px;
}

.skeleton-wall-post .skel-post-actions {
	display: flex;
	gap: 14px;
	margin-top: 10px;
}

/* ---- Mic seat (mirrors micAvatarHtml(), js/vero/vboot.js) ---- */

.skeleton-mic-seat {
	direction: rtl;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.skeleton-mic-seat .skel-mic-name {
	width: 44px;
	height: 9px;
}

/* ---- User search form (mirrors system/panel/user_search.php's own fields —
   this panel opens with an empty results area, so the skeleton mirrors the
   form itself: username input, type/order-by select pair, country select,
   checkbox row — not fake result rows). ---- */

.skeleton-search-form {
	direction: rtl;
	padding: 10px;
	box-sizing: border-box;
}

.skeleton-search-form .skel-search-field {
	margin-bottom: 14px;
}

.skeleton-search-form .skel-search-row {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.skeleton-search-form .skel-search-half {
	flex: 1 1 50%;
	min-width: 0;
}

.skeleton-search-form .skel-search-check {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* ---- Private message row: simple flex with explicit direction:ltr so
   theme RTL and table-cell positioning never interfere. Incoming = body
   (LEFT, flex:1) + avatar (RIGHT); outgoing = avatar (LEFT) + body
   (RIGHT, flex:1). All classes are skel-pm-* — no real CSS class reuse. ---- */

.skel-pm-row {
	direction: ltr;
	display: flex;
	width: 100%;
	margin-bottom: 3px;
}

.skel-pm-row .skel-pm-avatar {
	flex-shrink: 0;
	width: 40px;
	text-align: center;
}

.skel-pm-row .skel-pm-body {
	flex: 1;
	min-width: 0;
}

.skel-pm-row .skel-pm-bubble {
	background: #C8C8C8;
	border-radius: 10px;
	padding: 10px;
}

.skel-pm-row .skel-pm-bubble .skel-line {
	display: block;
}

.skel-pm-row .skel-pm-date {
	padding: 3px 5px;
}

.skel-pm-row .skel-pm-media {
	margin-top: 4px;
}

.skel-pm-row .skel-pm-file {
	margin-top: 4px;
}