/* ==========================================================================
   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_main.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_main.js) ---- */

.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;
}

/* ---- 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;
}