:root {
    --skeleton-base: #e8edf3;
    --skeleton-highlight: #f8fafc;
    --skeleton-border: rgba(15, 23, 42, .08);
    --skeleton-surface: #fff;
    --skeleton-text: #667085;
}

html.dark,
html[data-bs-theme="dark"],
html[data-theme="dark"],
body.dark-mode,
body.theme-dark {
    --skeleton-base: #303744;
    --skeleton-highlight: #424c5b;
    --skeleton-border: rgba(255, 255, 255, .09);
    --skeleton-surface: #202631;
    --skeleton-text: #cbd5e1;
}

.skeleton {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: var(--skeleton-width, 100%);
    height: var(--skeleton-height, 1rem);
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--skeleton-base);
    background-image: linear-gradient(100deg, transparent 25%, var(--skeleton-highlight) 48%, transparent 72%);
    background-size: 220% 100%;
    animation: skeleton-shimmer 1.35s ease-in-out infinite;
}

.skeleton--circle { border-radius: 50%; }
.skeleton--text { border-radius: 999px; }

.skeleton-card {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--skeleton-border);
    border-radius: 16px;
    background: var(--skeleton-surface);
}

.skeleton-card__identity,
.skeleton-list-item,
.skeleton-avatar-text,
.skeleton-stat__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.skeleton-card__identity-copy,
.skeleton-list-item__copy,
.skeleton-avatar-text__copy {
    display: grid;
    flex: 1 1 auto;
    gap: 9px;
    min-width: 0;
}

.skeleton-card__lines { display: grid; gap: 10px; }
.skeleton-card__image { border-radius: 12px; }

.skeleton-list-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--skeleton-border);
}

.skeleton-table {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--skeleton-border);
    border-radius: 10px;
    background: var(--skeleton-surface);
}

.skeleton-table__head,
.skeleton-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(calc(var(--skeleton-table-columns) - 1), minmax(0, 1fr));
    align-items: center;
    gap: 16px;
    min-height: 48px;
    padding: 10px 16px;
}

.skeleton-table__head { background: color-mix(in srgb, var(--skeleton-base) 42%, var(--skeleton-surface)); }
.skeleton-table__row + .skeleton-table__row { border-top: 1px solid var(--skeleton-border); }

.skeleton-stat {
    display: grid;
    gap: 14px;
    min-height: 126px;
    padding: 18px;
    border: 1px solid var(--skeleton-border);
    border-radius: 14px;
    background: var(--skeleton-surface);
}

.skeleton-stat__heading { justify-content: space-between; }
.skeleton-stat__value { margin-top: 2px; }

.skeleton-chart {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 12px;
    width: 100%;
    min-height: var(--skeleton-chart-height, 220px);
    padding: 12px 4px 0;
}

.skeleton-chart__plot {
    display: flex;
    align-items: end;
    justify-content: space-around;
    gap: 12px;
    min-height: 0;
    border-bottom: 1px solid var(--skeleton-border);
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 24%, var(--skeleton-border) 25%, transparent 25.5%);
}

.skeleton-chart__bar { min-width: 8px; max-width: 46px; border-radius: 6px 6px 0 0; }
.skeleton-chart__labels { display: flex; justify-content: space-around; gap: 10px; }
.skeleton-chart__labels .skeleton { max-width: 48px; }

.skeleton-chart-mount {
    position: relative;
    width: 100%;
    min-width: 0;
    height: var(--skeleton-chart-height, 220px);
    min-height: var(--skeleton-chart-height, 220px);
}

.skeleton-chart-mount__placeholder {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: var(--skeleton-surface);
    visibility: hidden;
    animation: skeleton-placeholder-appear 0s linear .3s forwards;
}

.skeleton-chart-mount__placeholder .skeleton-chart { height: 100%; }
.skeleton-chart__target { position: relative; z-index: 0; width: 100%; height: var(--skeleton-chart-height, 220px); min-height: var(--skeleton-chart-height, 220px); }
.skeleton-chart__target > canvas { display: block; width: 100% !important; height: 100% !important; }
.skeleton-chart-mount__placeholder.skeleton-chart-mount__error,
.skeleton-chart-mount__placeholder.skeleton-chart-mount__empty {
    display: grid;
    place-items: center;
    padding: 18px;
    color: var(--skeleton-text);
    font-size: .9rem;
    text-align: center;
    visibility: visible;
    animation: none;
}

.skeleton-media {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: #08090b;
    opacity: 0;
    pointer-events: none;
    animation: skeleton-media-appear .01s linear .3s forwards;
}

.skeleton-media .skeleton {
    --skeleton-base: #222831;
    --skeleton-highlight: #3a424e;
}

.skeleton-media__play { width: 54px; height: 54px; }
.skeleton-media__controls { position: absolute; right: 20px; bottom: 16px; left: 20px; display: flex; align-items: center; gap: 12px; }
.skeleton-media__progress { flex: 1 1 auto; }
.skeleton-media--error { display: grid; place-items: center; color: #fecaca; text-align: center; opacity: 1; animation: none; }
.skeleton-media--error .skeleton-media__play,
.skeleton-media--error .skeleton-media__controls { display: none; }

.chat-user-skeleton-list { display: grid; }
.chat-user-skeleton { padding: 12px 14px; border-bottom: 1px solid var(--skeleton-border); }
.chat-message-skeleton-list { display: grid; gap: 16px; padding: 18px; }
.chat-message-skeleton-row { display: flex; align-items: end; gap: 9px; max-width: 82%; }
.chat-message-skeleton-row--right { flex-direction: row-reverse; justify-self: end; }
.chat-message-skeleton-bubble { display: grid; gap: 9px; width: min(320px, 58vw); padding: 14px; border: 1px solid var(--skeleton-border); border-radius: 14px; background: var(--skeleton-surface); }
.chat-content-error { padding: 16px; color: #b42318; text-align: center; }
.post-body-skeleton { display: grid; gap: 12px; padding-bottom: 16px; }
.post-comments-skeleton-list { display: grid; gap: 14px; padding: 16px 0; }
.skeleton-ticket-view { display: grid; gap: 20px; padding: 20px; }
.skeleton-ticket-view__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1.15fr); gap: 24px; align-items: center; }
.skeleton-ticket-view__details { display: grid; justify-items: center; gap: 16px; padding: 18px; }

.skeleton-form { display: grid; gap: 20px; }
.skeleton-form__field { display: grid; gap: 9px; }
.skeleton-form__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.skeleton-modal-content { display: grid; gap: 16px; min-height: 180px; }

.content-skeleton-placeholder { min-width: 0; }
.content-skeleton-status { position: absolute !important; }
.feed-skeleton-stack { display: grid; gap: 20px; }
.feed-skeleton-stack .skeleton-card { padding: 20px; }

.skeleton-table__row .skeleton { max-width: 100%; }
tr.skeleton-table__row > td { padding: 14px 12px; }
tr.skeleton-table__row .skeleton { height: 0.8rem; }

div.dataTables_processing.content-skeleton-processing {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    pointer-events: none;
}

div.dataTables_processing.content-skeleton-processing > * { display: none !important; }

@keyframes skeleton-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -120% 0; }
}

@keyframes skeleton-placeholder-appear { to { visibility: visible; } }
@keyframes skeleton-media-appear { to { opacity: 1; } }

@media (max-width: 575.98px) {
    .skeleton-card { padding: 16px; border-radius: 14px; }
    .skeleton-table__head,
    .skeleton-table__row { gap: 9px; padding-right: 10px; padding-left: 10px; }
    .skeleton-ticket-view__content { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .skeleton::before,
    .skeleton::after {
        animation: none !important;
        background-image: none !important;
    }

    .skeleton-chart-mount__placeholder { visibility: visible; animation: none; }
    .skeleton-media { opacity: 1; animation: none; }
}