/*
 * Loading skeletons in the game UI look. This sheet is linked from index.html,
 * so it paints before the app bundle (and game-ui.css) loads. Tokens read the
 * game-ui.css and style.css values once they exist and fall back to copies of
 * them (D2 dark palette) for the static #timeline-bootstrap shell.
 * Chrome (panels, plates, navy HUD strips, frames) is drawn as on the loaded
 * page; only data (text, icons, avatars) becomes pulsing placeholder blocks.
 */
:root {
    --loading-unit: var(--ba-ui-unit, 0.375px);
    --loading-slant: var(--ba-ui-slant, -10deg);
    --loading-navy: var(--ba-ui-navy, #152335);
    --loading-frame: var(--ba-ui-tooltip-frame, #2be5fa);
    --loading-accent: var(--ba-ui-accent, #8de4ff);
    --loading-accent-strong: var(--ba-ui-accent-strong, #5cd3ff);
    --loading-plate-radius: calc(16 * var(--loading-unit));
    --loading-plate-shadow:
        0 0 0 1px rgb(10 43 87 / 45%),
        0 calc(6 * var(--loading-unit)) 0 rgb(8 29 47 / 55%),
        0 calc(9 * var(--loading-unit)) calc(12 * var(--loading-unit)) rgb(11 29 45 / 28%);
    /* Placeholder drawn on white plates, which stay white in both themes. */
    --loading-on-plate: #d5dbe0;
    /* Placeholder on the navy HUD. */
    --loading-on-navy: rgb(255 255 255 / 12%);

    --loading-page-bg: var(--ba-ui-page-bg, #d1edff);
    --loading-surface: var(--ba-ui-surface, #ffffff);
    --loading-text: var(--ba-ui-text, #2c4663);
    --loading-placeholder: var(--ba-ui-divider, #cdd4d9);
    --loading-border: var(--ba-ui-border, #95aaab);
    --loading-divider: var(--ba-ui-divider, #cdd4d9);
    --loading-track: var(--ba-ui-track, #cdd4d9);
    --loading-option-bg: var(--ba-ui-option-bg, #d1edff);
    --loading-option-hover: var(--ba-ui-option-hover, #eef8ff);
    --loading-plate-secondary: var(--ba-ui-plate-secondary, #ffffff);
    --loading-panel-header: var(--ba-ui-panel-header, #f1f3f6);
    --loading-panel-divider: var(--ba-ui-panel-divider, #dcdfdf);
    --loading-panel-body: var(--ba-ui-panel-body, #f0f0f0);
    --loading-panel-rim: var(--ba-ui-panel-rim, #f8f8f8);
    --loading-panel-base: var(--ba-ui-panel-base, rgb(10 24 39 / 95%));
    --loading-deco-opacity: var(--ba-ui-deco-opacity, 1);
    --loading-header-bg: var(--layout-header-bg, #ffffff);
    --loading-sidebar-bg: var(--layout-sidebar-bg, #f2faff);
    --loading-sidebar-tree: var(--layout-sidebar-tool-icon, #506e8e);
    /* Team track and mode switch tones from Timeline.vue / TimelineTypeSwitch.vue. */
    --loading-team-track: #ffffff;
    --loading-team-track-border: #d5dbe0;
    --loading-switch-track: var(--ba-ui-track, #cdd4d9);
    --loading-switch-shadow: inset 0 2px 0 rgb(44 70 99 / 15%);
}

:root[data-theme="dark"] {
    --loading-page-bg: var(--ba-ui-page-bg, #13171c);
    --loading-surface: var(--ba-ui-surface, #262c33);
    --loading-text: var(--ba-ui-text, #e9eef3);
    --loading-placeholder: var(--ba-ui-divider, #3b434d);
    --loading-border: var(--ba-ui-border, #4c5866);
    --loading-divider: var(--ba-ui-divider, #3b434d);
    --loading-track: var(--ba-ui-track, #303841);
    --loading-option-bg: var(--ba-ui-option-bg, #2c3846);
    --loading-option-hover: var(--ba-ui-option-hover, #232931);
    --loading-plate-secondary: var(--ba-ui-plate-secondary, #36404b);
    --loading-panel-header: var(--ba-ui-panel-header, #2c333b);
    --loading-panel-divider: var(--ba-ui-panel-divider, #3b434d);
    --loading-panel-body: var(--ba-ui-panel-body, #262c33);
    --loading-panel-rim: var(--ba-ui-panel-rim, #262c33);
    --loading-panel-base: var(--ba-ui-panel-base, #0b0e12);
    --loading-deco-opacity: var(--ba-ui-deco-opacity, 0.32);
    --loading-header-bg: var(--layout-header-bg, #1a1f25);
    --loading-sidebar-bg: var(--layout-sidebar-bg, #161a20);
    --loading-sidebar-tree: var(--layout-sidebar-tool-icon, #a5b0bc);
    --loading-team-track: #2c333b;
    --loading-team-track-border: var(--ba-ui-divider, #3b434d);
    --loading-switch-track: #1b2026;
    --loading-switch-shadow: inset 0 2px 0 rgb(0 0 0 / 35%), 0 1px 0 rgb(255 255 255 / 8%);
}

.loading-skeleton {
    background: var(--loading-placeholder);
    border-radius: 0.4rem;
    animation: loading-pulse 1.6s ease-in-out infinite;
}

.loading-line {
    width: 8rem;
    height: 0.8rem;
}

/* Skewed button plate (Common_Btn_BG, as .ba-ui-button / .setting-option-container):
   one CSS box, never a 9-slice, with the 15-unit baked shadow below it. The data
   placeholder is centered on the visible plate. */
.loading-plate {
    position: relative;
    z-index: 0;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    padding-bottom: calc(15 * var(--loading-unit));
    box-sizing: border-box;
    --loading-plate-fill: var(--loading-plate-secondary);
}

.loading-plate::before {
    position: absolute;
    z-index: -1;
    inset: 0 0 calc(15 * var(--loading-unit));
    border-radius: var(--loading-plate-radius);
    background: var(--loading-plate-fill);
    box-shadow: var(--loading-plate-shadow);
    transform: skewX(var(--loading-slant));
    content: "";
}

/* White plate in both themes (header buttons and the toggles on navy bars). */
.loading-plate--white {
    --loading-plate-fill: #ffffff;
    --loading-placeholder: var(--loading-on-plate);
}

.loading-plate--primary {
    --loading-plate-fill: var(--loading-accent);
    --loading-placeholder: rgb(23 50 75 / 22%);
}

.loading-plate-icon {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 0.3rem;
}

/* ---------- Static shell before the app bundle (index.html) ---------- */
.timeline-loading {
    position: absolute;
    top: 0;
    left: var(--sidebar-width, 11rem);
    right: 0;
    color: var(--loading-text);
}

#timeline-bootstrap[hidden] {
    display: none;
}

#timeline-bootstrap {
    left: 0;
    padding-left: var(--sidebar-width, 11rem);
}

/* Header.vue: header surface with a static 1px divider (no accent line). */
.timeline-bootstrap-header {
    position: fixed;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    height: var(--header-height, 4.1rem);
    padding: 0 1%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--loading-divider);
    background: var(--loading-header-bg);
    box-shadow: 0 2px 6px rgb(23 50 75 / 12%);
    z-index: 1001;
}

/* Settings.css header button: 2.85rem x 2.7rem white plate. */
.timeline-bootstrap-button {
    width: 2.85rem;
    height: 2.7rem;
}

.timeline-bootstrap-menu,
.timeline-bootstrap-reopen {
    display: none;
}

/* Sidebar.vue geometry: title, three page links, the timeline panel tree and the last link. */
.timeline-bootstrap-navigation {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width, 11rem);
    padding: calc(var(--header-height, 4.1rem) + 1.5rem) 0.5rem 0;
    box-sizing: border-box;
    border-right: 1px solid var(--loading-divider);
    background: var(--loading-sidebar-bg);
    box-shadow: 2px 0 6px rgb(23 50 75 / 8%);
}

.timeline-bootstrap-title {
    position: relative;
    display: flex;
    align-items: center;
    height: 1.23rem;
    /* The page's 0.5rem top margin collapses into the list's 1.5rem offset. */
    margin: 0 0 0.45rem;
    padding: 0 0.5rem 0 0.75rem;
}

.timeline-bootstrap-title::before {
    position: absolute;
    top: 0.18rem;
    bottom: 0.18rem;
    left: 0.25rem;
    width: 3px;
    background: var(--loading-accent-strong);
    content: "";
}

.timeline-bootstrap-title .loading-line {
    width: 3.3rem;
    height: 0.7rem;
}

.timeline-bootstrap-links {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.timeline-bootstrap-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.6rem;
    padding: 0 0.5rem;
    box-sizing: border-box;
}

.timeline-bootstrap-link-icon {
    flex: 0 0 1.68rem;
    height: 1.68rem;
    border-radius: 0.3rem;
}

/* Label widths follow 首頁 / 羈絆計算器 / 時間軸編輯器 / 翻牌選擇器. */
.timeline-bootstrap-link .loading-line {
    width: 5rem;
    height: 0.9rem;
}

.timeline-bootstrap-links > .timeline-bootstrap-link:first-child .loading-line {
    width: 2rem;
}

.timeline-bootstrap-links > .timeline-bootstrap-link:nth-child(3) .loading-line {
    width: 6rem;
}

.timeline-bootstrap-panels {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.25rem 0 0.35rem 1.25rem;
    padding-left: 0.85rem;
}

.timeline-bootstrap-panels::before {
    position: absolute;
    top: 0;
    bottom: 1rem;
    left: 0;
    width: 0.2rem;
    background: var(--loading-sidebar-tree);
    content: "";
}

.timeline-bootstrap-panels .timeline-bootstrap-link {
    position: relative;
    height: 2.2rem;
    padding: 0 0.65rem;
}

.timeline-bootstrap-panels .timeline-bootstrap-link::before {
    position: absolute;
    top: 50%;
    left: -0.85rem;
    width: 0.85rem;
    height: 0.2rem;
    background: var(--loading-sidebar-tree);
    transform: translateY(-50%);
    content: "";
}

.timeline-bootstrap-panels .loading-line {
    width: 4.9rem;
    height: 0.8rem;
}

/* Copy of the game-ui.css titled panel for the shell, which paints before
   that sheet loads; keep it in step with .ba-ui-panel there. */
#timeline-bootstrap .ba-ui-panel {
    position: relative;
    z-index: 0;
    min-width: 0;
}

#timeline-bootstrap .ba-ui-panel::before {
    position: absolute;
    z-index: -1;
    inset: 0 calc(4 * var(--loading-unit)) calc(23 * var(--loading-unit));
    border-radius: calc(26 * var(--loading-unit)) calc(26 * var(--loading-unit)) calc(8 * var(--loading-unit)) calc(8 * var(--loading-unit));
    background: linear-gradient(
        var(--loading-panel-header) calc(130 * var(--loading-unit)),
        var(--loading-panel-divider) calc(130 * var(--loading-unit)) calc(134 * var(--loading-unit)),
        var(--loading-panel-body) calc(134 * var(--loading-unit))
    );
    box-shadow:
        inset calc(4 * var(--loading-unit)) 0 0 var(--loading-panel-rim),
        inset calc(-4 * var(--loading-unit)) 0 0 var(--loading-panel-rim),
        0 calc(7 * var(--loading-unit)) 0 var(--loading-panel-base),
        0 calc(9 * var(--loading-unit)) calc(14 * var(--loading-unit)) rgb(0 0 0 / 55%),
        0 0 calc(4 * var(--loading-unit)) rgb(0 0 0 / 28%);
    pointer-events: none;
    content: "";
}

#timeline-bootstrap .ba-ui-panel-header {
    position: absolute;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(130 * var(--loading-unit));
    padding: 0 56px;
}

#timeline-bootstrap .ba-ui-panel-decoration {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    container-type: inline-size;
    opacity: var(--loading-deco-opacity);
    pointer-events: none;
}

#timeline-bootstrap .ba-ui-panel-decoration::before,
#timeline-bootstrap .ba-ui-panel-decoration::after {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
}

#timeline-bootstrap .ba-ui-panel-decoration::before {
    top: calc(2 * var(--loading-unit));
    left: calc(6 * var(--loading-unit));
    width: calc(493 * var(--loading-unit));
    height: calc(132 * var(--loading-unit));
    background-image: url("/images/ui/game-ui/popup-deco-top.png");
}

#timeline-bootstrap .ba-ui-panel-decoration::after {
    --loading-deco-unit: min(var(--loading-unit), calc(100cqw / 2098));
    right: calc(4.4 * var(--loading-deco-unit));
    bottom: calc(23.7 * var(--loading-deco-unit));
    width: calc(1458 * var(--loading-deco-unit));
    height: calc(692 * var(--loading-deco-unit));
    background-image: url("/images/ui/game-ui/popup-deco-bottom.png");
}

:root[data-theme="dark"] #timeline-bootstrap .ba-ui-panel-decoration::after {
    opacity: 0.5;
}

/* ---------- Timeline page skeleton (shell and TimelineLoadingSkeleton) ---------- */
.timeline-wrapper.timeline-loading {
    background: var(--loading-page-bg);
}

/* 隊伍編成 / 圖片生成預覽: titled panels sized as in Timeline.vue and TimelinePreviewPanel.vue. */
.timeline-wrapper.timeline-loading .battle-selection-panel,
.timeline-wrapper.timeline-loading .preview-image-panel {
    padding: calc(145 * var(--loading-unit) + 0.5rem) 1rem 1.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.timeline-wrapper.timeline-loading .preview-image-panel {
    display: block;
    min-height: 0;
    box-sizing: border-box;
}

.timeline-loading-panel-title {
    width: 4.6rem;
    height: 1.1rem;
}

.timeline-loading-panel-title--wide {
    width: 6.9rem;
}

.timeline-wrapper.timeline-loading .student-list-panel-top {
    min-height: 3rem;
    padding: 0 0.25rem 0.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.timeline-wrapper.timeline-loading .battle-selection-content {
    padding: 1rem 0 0;
    border-top: 2px dotted var(--loading-divider);
}

/* Field captions with the 4px cyan marker (模式 / 時間軸時間長度). */
.timeline-loading .switch-label,
.timeline-loading .battle-duration-label {
    position: relative;
    display: flex;
    align-items: center;
    height: 1.12rem;
    padding-left: 0.6rem;
    font-size: 0.8rem;
}

.timeline-loading .switch-label::before,
.timeline-loading .battle-duration-label::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 1em;
    background: var(--loading-accent-strong);
    transform: translateY(-50%);
    content: "";
}

.timeline-loading .switch-label .loading-line {
    width: 1.7rem;
    height: 0.7rem;
}

.timeline-loading .battle-duration-label .loading-line {
    width: 5.6rem;
    max-width: 100%;
    height: 0.7rem;
}

.timeline-loading-mode {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    height: 2.5rem;
}

/* M4 mode switch: recessed track with the white plate on the current mode. */
.timeline-wrapper.timeline-loading .timeline-type-switch {
    position: relative;
    display: grid;
    width: 13rem;
    height: 2.25rem;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    padding: 3px;
    box-sizing: border-box;
    border-radius: calc(26 * var(--loading-unit));
    background: var(--loading-switch-track);
    box-shadow: var(--loading-switch-shadow);
}

.timeline-wrapper.timeline-loading .timeline-type-switch::before {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: calc(18 * var(--loading-unit));
    background: linear-gradient(var(--loading-accent-strong), var(--loading-accent-strong)) 0 50% / 3px 50% no-repeat, #ffffff;
    box-shadow: 0 2px 0 rgb(8 29 47 / 25%), 0 0 0 1px rgb(10 43 87 / 20%);
    content: "";
}

.timeline-wrapper.timeline-loading .timeline-type-switch.is-right::before {
    transform: translateX(100%);
}

.timeline-loading .timeline-type-switch .loading-line {
    position: relative;
    width: 2.3rem;
    max-width: 80%;
    height: 0.6rem;
}

.timeline-loading .timeline-type-switch .loading-line + .loading-line {
    width: 4.7rem;
}

.timeline-wrapper.timeline-loading .timeline-type-switch:not(.is-right) .loading-line:first-child,
.timeline-wrapper.timeline-loading .timeline-type-switch.is-right .loading-line + .loading-line {
    --loading-placeholder: var(--loading-on-plate);
}

/* Same weight as the page's scoped rules: the container queries in
   timeline-layout.css stack the field but keep this gap and nowrap. */
.timeline-wrapper.timeline-loading .battle-duration-field {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.timeline-wrapper.timeline-loading .battle-duration-label {
    white-space: nowrap;
}

/* Duration select frame with the cyan caret. */
.timeline-loading-select {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 5.5rem;
    height: 2.25rem;
    padding: 0 1.6rem 0 0.65rem;
    box-sizing: border-box;
    border: 1px solid var(--loading-border);
    border-radius: calc(10 * var(--loading-unit));
    background: var(--loading-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%235cd3ff'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 0.65rem 0.4rem;
}

.timeline-loading-select .loading-line {
    width: 2.3rem;
    height: 0.75rem;
}

/* Square menu plate: 2.5rem plate plus the baked shadow. */
.timeline-loading-menu {
    width: 3rem;
    height: calc(2.5rem + 15 * var(--loading-unit));
}

.timeline-loading-menu .loading-skeleton {
    width: 1.25rem;
    height: 1rem;
    border-radius: 0.2rem;
}

/* P4 team track: neutral white track, red / blue slanted group bars. */
.timeline-wrapper.timeline-loading .track-container {
    border: 1px solid var(--loading-team-track-border);
    border-radius: 8px;
    background: var(--loading-team-track);
}

.timeline-loading .student-select-group--stricker {
    --selection-group-color: rgb(182, 56, 53);
}

.timeline-loading .student-select-group--special {
    --selection-group-color: rgb(34, 111, 188);
}

.timeline-wrapper.timeline-loading .selection-group-color-line {
    height: 4px;
    margin: 0 0.75rem;
    border-radius: 2px;
    transform: skewX(var(--loading-slant));
}

.loading-student-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--student-track-card-width);
    height: 7.5rem;
    padding: 0 0.5rem;
    box-sizing: border-box;
}

.loading-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.6rem;
}

.loading-student-slot .loading-avatar {
    flex-shrink: 0;
    width: var(--student-avatar-size);
    height: var(--student-avatar-size);
    border-radius: 6px;
}

.loading-student-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2rem;
    padding-top: 0.5rem;
    box-sizing: border-box;
}

.loading-student-label .loading-line {
    width: min(100%, 3.75rem);
    height: 0.75rem;
}

/* Enemy slot: navy HUD card with the cyan corner bar and framed image area. */
.timeline-wrapper.timeline-loading .timeline-loading-enemy {
    position: relative;
    flex: 0 0 13rem;
    width: 13rem;
    box-sizing: border-box;
    border: 1px solid rgb(141 228 255 / 28%);
    border-radius: 8px;
    background: var(--loading-navy);
    box-shadow: 0 2px 6px rgb(11 29 45 / 25%);
    --loading-placeholder: var(--loading-on-navy);
}

.timeline-loading-enemy::before {
    position: absolute;
    top: 0;
    left: 0.75rem;
    width: 3rem;
    height: 3px;
    background: var(--loading-frame);
    transform: skewX(var(--loading-slant));
    content: "";
}

.timeline-loading-enemy-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 7.5rem;
    padding: 0.5rem;
    box-sizing: border-box;
}

.timeline-loading-enemy-image {
    width: 100%;
    height: 5.5rem;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 1px solid rgb(141 228 255 / 30%);
    border-radius: 6px;
    background: rgb(255 255 255 / 6%);
}

.timeline-loading-enemy-label {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 1.5rem;
}

.timeline-loading-enemy-label .loading-line {
    width: 4.5rem;
}

.timeline-wrapper.timeline-loading .preview-image-container {
    min-height: 12rem;
    padding: 0.5rem;
    scrollbar-gutter: auto;
}

.timeline-loading-preview {
    align-self: center;
    width: min(100%, var(--timeline-preview-width));
    height: var(--timeline-preview-height);
    flex-shrink: 0;
    border-radius: 0;
}

/* ---------- Editor sidebar (ClassicTimelineEditor + TimelineAppendPanel) ---------- */
.timeline-wrapper.timeline-loading .timeline-editor-sidebar {
    border-left: 0;
    background: var(--loading-page-bg);
    box-shadow: -1px 0 0 rgb(10 43 87 / 18%), -10px 0 24px rgb(11 29 45 / 14%);
    text-align: left;
}

:root[data-theme="dark"] .timeline-wrapper.timeline-loading .timeline-editor-sidebar {
    box-shadow: -1px 0 0 rgb(141 228 255 / 16%), -10px 0 24px rgb(0 0 0 / 35%);
}

/* Popup-style title band: decoration strip, plates at both ends, centered title. */
.timeline-loading-editor-heading {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
    min-height: calc(130 * var(--loading-unit));
    padding: 0.4rem 0.75rem;
    overflow: hidden;
    border-bottom: 1px solid var(--loading-divider);
    background: var(--loading-surface);
}

.timeline-loading-editor-decoration {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: calc(-40 * var(--loading-unit));
    aspect-ratio: 493 / 132;
    background: url("/images/ui/game-ui/popup-deco-top.png") 0 0 / 100% 100% no-repeat;
    opacity: var(--loading-deco-opacity);
    pointer-events: none;
}

/* Compact plates sized like the collapse button and "＋ 分段". */
.timeline-loading-collapse {
    justify-self: start;
    width: 2.6rem;
    height: calc(1.9rem + 15 * var(--loading-unit));
}

.timeline-loading-collapse .loading-skeleton {
    width: 0.8rem;
    height: 0.9rem;
    border-radius: 0.2rem;
}

.timeline-loading-editor-title {
    width: 6rem;
    height: 1rem;
}

.timeline-loading-split {
    justify-self: end;
    width: 4.15rem;
    height: calc(1.825rem + 15 * var(--loading-unit));
    margin-inline: 0.2rem;
}

.timeline-loading-split .loading-line {
    width: 2.4rem;
    height: 0.65rem;
}

/* Navy HUD summary strip. */
.timeline-loading-summary {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.6rem;
    height: 2.4rem;
    padding: 0 0.9rem 0 1.1rem;
    box-sizing: border-box;
    background: var(--loading-navy);
    --loading-placeholder: var(--loading-on-navy);
}

.timeline-loading-summary::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 1.1rem;
    background: var(--loading-frame);
    transform: translateY(-50%);
    content: "";
}

.timeline-loading-summary .loading-line {
    width: 3rem;
    height: 0.75rem;
}

.timeline-loading-queue-empty {
    display: grid;
    justify-items: center;
    flex-shrink: 0;
    gap: 0.45rem;
    padding: 1.3rem 1rem 0.75rem;
    background: var(--loading-page-bg);
}

/* Empty-slot frame: card surface with the cyan dashed border. */
.timeline-loading-empty-symbol {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px dashed var(--loading-accent-strong);
    border-radius: calc(16 * var(--loading-unit));
    background: var(--loading-surface);
}

.timeline-loading-queue-empty .loading-line {
    width: 6.8rem;
    height: 0.85rem;
    margin-block: 0.2rem;
}

.timeline-loading-queue-empty .timeline-loading-empty-description {
    width: min(100%, 16rem);
    height: 0.7rem;
    margin-block: 0.175rem;
}

.timeline-loading-editor-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    gap: 0.75rem;
    padding: 1rem 0.9rem 2rem;
    overflow: auto;
    box-sizing: border-box;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    background: var(--loading-page-bg);
}

/* Queue card frame (TimelineQueueItem / TimelineQueueSplit surface). */
.timeline-loading-editor-track {
    width: 100%;
    min-height: 6rem;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 1px solid var(--loading-divider);
    border-radius: calc(16 * var(--loading-unit));
    background: var(--loading-surface);
    box-shadow: 0 2px 0 rgb(8 29 47 / 14%), 0 4px 10px rgb(11 29 45 / 10%);
}

.timeline-loading-editor-split {
    min-height: 3rem;
}

.timeline-loading-append-panel {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 55%;
    background: var(--loading-surface);
    box-shadow: 0 -0.3rem 1rem rgb(11 29 45 / 16%);
}

/* Navy HUD header bar with the white toggle plate. */
.timeline-loading-append-heading {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.6rem;
    padding: 0.4rem 0.75rem 0.4rem 1.1rem;
    background: var(--loading-navy);
    --loading-placeholder: var(--loading-on-navy);
}

.timeline-loading-append-heading::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 1.1rem;
    background: var(--loading-frame);
    transform: translateY(-50%);
    content: "";
}

.timeline-loading-append-heading > .loading-line {
    width: 3.6rem;
    height: 0.9rem;
}

.timeline-loading-append-heading > .timeline-loading-append-hint {
    width: 7.5rem;
    min-width: 0;
    height: 0.65rem;
}

.timeline-loading-append-toggle {
    width: 2.1rem;
    height: calc(1.55rem + 15 * var(--loading-unit));
    margin-left: auto;
}

.timeline-loading-append-toggle .loading-skeleton {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 0.15rem;
}

.timeline-loading-append-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0.8rem;
    overflow: hidden;
}

/* Recording options as a settings row: pale blue with the cyan bar. */
.timeline-loading-append-options {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem 0.45rem 0.8rem;
    border-radius: calc(11 * var(--loading-unit));
    background: var(--loading-option-bg);
}

.timeline-loading-append-options::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 1.2rem;
    background: var(--loading-accent-strong);
    transform: translateY(-50%);
    content: "";
}

/* Segmented plate group; the first mode (最速) is the default selection. */
.timeline-loading-record-options {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
    flex: 0 0 9rem;
    height: 2.3rem;
    padding: 3px;
    box-sizing: border-box;
    border-radius: var(--loading-plate-radius);
    background: var(--loading-plate-secondary);
    box-shadow: 0 0 0 1px rgb(10 43 87 / 25%), 0 2px 4px rgb(11 29 45 / 18%);
}

.timeline-loading-record-options::before {
    position: absolute;
    z-index: -1;
    top: 3px;
    bottom: 3px;
    left: calc(3px + 2px);
    width: calc((100% - 6px) / 3 - 4px);
    border-radius: calc(12 * var(--loading-unit));
    background: var(--loading-accent);
    box-shadow: 0 0 0 1px rgb(10 43 87 / 35%), 0 calc(5 * var(--loading-unit)) 0 rgb(8 29 47 / 40%);
    transform: skewX(var(--loading-slant));
    content: "";
}

.timeline-loading-record-options .loading-line {
    width: 1.5rem;
    height: 0.6rem;
}

.timeline-loading-record-options .loading-line:first-child {
    --loading-placeholder: rgb(23 50 75 / 22%);
}

.timeline-loading-record-field {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.timeline-loading-record-field > .loading-line {
    width: 2.6rem;
    height: 0.65rem;
}

.timeline-loading-record-input {
    display: flex;
    align-items: center;
    width: 5.4rem;
    height: 2.35rem;
    padding: 0.3rem;
    box-sizing: border-box;
    border: 1px solid var(--loading-divider);
    border-radius: calc(10 * var(--loading-unit));
    background: var(--loading-option-hover);
}

.timeline-loading-record-input .loading-line {
    width: 1.6rem;
    height: 0.65rem;
}

.timeline-loading-search {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.4rem;
    height: 2.35rem;
    margin-top: 0.65rem;
    padding: 0.35rem 0.6rem;
    box-sizing: border-box;
    border: 1px solid var(--loading-border);
    border-radius: calc(10 * var(--loading-unit));
    background: var(--loading-surface);
}

.timeline-loading-search-icon {
    flex: 0 0 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
}

.timeline-loading-search .loading-line {
    width: 7.5rem;
    height: 0.7rem;
}

.timeline-loading-append-empty {
    display: grid;
    justify-items: center;
    flex-shrink: 0;
    padding: 1rem 0.5rem;
}

.timeline-loading-append-empty > .loading-line {
    width: 6rem;
    height: 0.75rem;
    margin-block: 0.15rem;
}

.timeline-loading-append-empty > .timeline-loading-empty-description {
    width: min(100%, 16rem);
    height: 0.7rem;
    margin: 0.525rem 0 0.925rem;
}

.timeline-loading-configure {
    width: 6.5rem;
    height: calc(1.925rem + 15 * var(--loading-unit));
}

.timeline-loading-configure .loading-line {
    width: 4.5rem;
    height: 0.65rem;
}

.timeline-loading-roster-list {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Group heading as a settings-row tag with the navy count badge. */
.timeline-loading-roster-heading {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.75rem 0 0.45rem;
    padding: 0.25rem 0.5rem 0.25rem 0.7rem;
    border-radius: calc(11 * var(--loading-unit));
    background: var(--loading-option-hover);
}

.timeline-loading-roster-heading::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 0.8rem;
    background: var(--loading-accent-strong);
    transform: translateY(-50%);
    content: "";
}

.timeline-loading-roster-heading .loading-line {
    width: 3rem;
    height: 0.6rem;
}

.timeline-loading-roster-badge {
    width: 2.4rem;
    height: 1.05rem;
    border-radius: 10px;
    background: var(--loading-navy);
}

.timeline-loading-roster-grid {
    display: grid;
    grid-template-columns: repeat(var(--roster-columns), minmax(0, 1fr));
    gap: 0.45rem;
}

.timeline-loading-roster-card {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.55rem 0.25rem;
    border: 1px solid var(--loading-divider);
    border-radius: calc(16 * var(--loading-unit));
    background: var(--loading-surface);
    box-shadow: 0 2px 0 rgb(8 29 47 / 12%);
}

.timeline-loading-roster-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem;
}

.timeline-loading-roster-card .loading-line {
    width: 80%;
    height: 0.75rem;
}

.timeline-loading-roster-card .loading-line:last-child {
    width: 60%;
    height: 0.6rem;
}

/* Footer note on the page tone. */
.timeline-loading-append-status {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 1.84rem;
    padding: 0 0.85rem;
    box-sizing: border-box;
    border-top: 1px solid var(--loading-divider);
    background: var(--loading-page-bg);
}

.timeline-loading-append-status .loading-line {
    width: 8.5rem;
    height: 0.65rem;
}

.timeline-loading-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.loading-status {
    margin: 0;
    font: 0.875rem/1.5 system-ui, sans-serif;
    color: var(--loading-text);
}

/* ---------- Selection grid skeleton (student and enemy select modals) ---------- */
.selection-grid-skeleton {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 1rem;
    width: 100%;
}

.selection-skeleton-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 5rem;
    padding-bottom: 0.75rem;
    border: 1px solid var(--loading-divider);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--loading-surface);
}

.selection-skeleton-card .loading-avatar {
    width: 100%;
    height: 5rem;
    border-radius: 0;
}

.selection-skeleton-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.selection-skeleton-card .loading-line {
    width: 65%;
    height: 0.6rem;
}

/* Student cards join the parent grid, so they share its columns and gaps. */
.selection-grid-skeleton--student {
    display: contents;
}

.selection-grid-skeleton--enemy {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0.65rem;
}

.selection-grid-skeleton--enemy .selection-skeleton-card {
    flex-direction: row;
    width: auto;
    padding: 0.75rem;
}

.selection-grid-skeleton--enemy .loading-avatar {
    flex: 0 0 5rem;
    height: 2.5rem;
    border-radius: 0.4rem;
}

@keyframes loading-pulse {
    0%, 100% {
        opacity: 0.55;
    }
    50% {
        opacity: 1;
    }
}

@media (max-width: 700px) {
    .timeline-loading {
        left: 0;
    }

    #timeline-bootstrap {
        padding-left: 0;
    }

    .timeline-bootstrap-navigation {
        display: none;
    }

    .timeline-bootstrap-menu,
    .timeline-bootstrap-reopen {
        display: grid;
    }

    .timeline-bootstrap-menu {
        position: absolute;
        left: calc(1% + 0.75rem);
    }

    .loading-student-slot {
        height: 5.75rem;
        padding: 0 0.2rem;
    }

    .loading-student-label {
        height: 1.5rem;
        padding-top: 0.25rem;
    }

    .timeline-wrapper.timeline-loading .timeline-loading-enemy {
        flex-basis: 11rem;
        width: 11rem;
    }

    .timeline-loading-enemy-content {
        min-height: 5.75rem;
    }

    .timeline-loading-enemy-image {
        height: 4.5rem;
    }
}

@media (max-width: 600px) {
    .timeline-wrapper.timeline-loading .battle-selection-panel,
    .timeline-wrapper.timeline-loading .preview-image-panel {
        padding-inline: 0.5rem;
    }

    .timeline-wrapper.timeline-loading .preview-image-container {
        padding: 0.25rem;
    }
}

@media (max-width: 1200px) {
    #timeline-bootstrap .timeline-editor-sidebar {
        display: none;
    }
}

@media (max-height: 650px) {
    .timeline-loading-append-panel {
        max-height: 75%;
    }

    .timeline-loading-roster-card {
        gap: 0.2rem;
        padding: 0.35rem 0.2rem;
    }

    .timeline-loading-roster-avatar {
        width: 2.25rem;
        height: 2.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-skeleton {
        animation: none;
    }
}

/* ---------- Timeline panel skeletons (per route) ---------- */
/* Shared by TimelineLoadingPanel.vue and the static bootstrap in index.html:
   cost / Buff / combat charts, the enemy HUD and the video steps. */
.loading-panel-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    gap: 0.75rem;
}

.loading-panel-body .loading-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.loading-panel-body .loading-chip {
    width: 6rem;
    height: 1.8rem;
    border-radius: calc(11 * var(--loading-unit));
}

.loading-panel-body .loading-chip.is-wide {
    width: 11rem;
}

.loading-panel-body .loading-chip.is-push {
    margin-left: auto;
}

/* Navy HUD strip: the summary cards of the combat and enemy panels. */
.loading-panel-body .loading-hud {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border-radius: calc(11 * var(--loading-unit));
    background: var(--loading-navy);
}

.loading-panel-body .loading-hud.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.loading-panel-body .loading-hud-cell {
    display: grid;
    gap: 0.45rem;
    padding: 0.8rem 0.9rem;
    box-shadow: inset -1px 0 rgb(255 255 255 / 8%), inset 0 -1px rgb(255 255 255 / 8%);
}

.loading-panel-body .loading-hud-cell i,
.loading-panel-body .loading-hud-cell b {
    display: block;
    background: rgb(255 255 255 / 14%);
}

.loading-panel-body .loading-hud-cell i {
    width: 4rem;
    height: 0.65rem;
}

.loading-panel-body .loading-hud-cell b {
    width: 8rem;
    height: 1.2rem;
}

.loading-panel-body .loading-hud.is-strip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
}

.loading-panel-body .loading-hud.is-strip b {
    width: 14rem;
    height: 0.75rem;
    margin-right: auto;
    background: rgb(255 255 255 / 14%);
}

.loading-panel-body .loading-step {
    width: 4.2rem;
    height: 1.4rem;
    background: rgb(255 255 255 / 12%);
}

.loading-panel-body .loading-chart {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 16rem;
    padding: 0.6rem;
    gap: 0.6rem;
    border-radius: calc(11 * var(--loading-unit));
    background: var(--loading-surface);
    box-shadow: 0 0 0 1px var(--loading-divider);
}

.loading-panel-body .loading-chart-heads {
    display: flex;
    padding-left: 4.5rem;
    gap: 9rem;
}

.loading-panel-body .loading-avatar {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
}

.loading-panel-body .loading-chart-area {
    flex: 1;
    min-height: 12rem;
}

.loading-panel-body .loading-chart-area.is-short {
    min-height: 8rem;
}

.loading-panel-body .loading-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.loading-panel-body .loading-tabs span {
    height: 2.4rem;
}

.loading-panel-body .loading-step-card {
    display: flex;
    flex-direction: column;
    padding: 0.55rem 0.65rem;
    gap: 0.6rem;
    border-radius: calc(11 * var(--loading-unit));
    outline: 1px dashed var(--loading-divider);
    outline-offset: -1px;
}

.loading-panel-body .loading-step-card.is-open {
    background: var(--loading-surface);
    outline: 2px solid var(--loading-accent-strong);
}

.loading-panel-body .loading-drop {
    height: 9rem;
    border: 2px dashed var(--loading-accent-strong);
    border-radius: calc(11 * var(--loading-unit));
    background: var(--loading-option-bg);
}

@container timeline-panel (max-width: 700px) {
    .loading-panel-body .loading-hud,
    .loading-panel-body .loading-hud.is-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .loading-panel-body .loading-chart-heads {
        gap: 3rem;
    }

    .loading-panel-body .loading-step {
        width: 1.4rem;
    }
}

/* Video steps: two columns like the finished panel, one on narrow panels. */
.loading-panel-body .loading-video-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
    align-items: start;
    gap: 0.75rem;
}

.loading-panel-body .loading-video-column {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

@container timeline-panel (max-width: 900px) {
    .loading-panel-body .loading-video-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Skeleton host = .timeline-panel-host: the panel width and the container
   the panels' own queries read. The bootstrap wraps its panel in one too. */
.loading-panel-host {
    container: timeline-panel / inline-size;
    width: min(100%, 88rem);
    min-width: 0;
}

.timeline-wrapper .loading-panel-host > .ba-ui-panel {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Fixed-height panels (cost, Buff, combat) as the finished ones; the cost
   panel grows to its stacked blocks on narrow hosts. */
.timeline-wrapper .loading-panel-host > :is(.is-cost, .is-buff, .is-student-combat) {
    display: flex;
    flex-direction: column;
    height: clamp(40rem, 85dvh, 64rem);
}

.timeline-wrapper .loading-panel-host > :is(.is-cost, .is-buff, .is-student-combat) > .loading-panel-body {
    flex: 1;
    min-height: 0;
}

.loading-panel-body .loading-hud.is-tall .loading-hud-cell {
    min-height: 6.6rem;
    box-sizing: border-box;
}

/* Cost rows at the finished heights: header 37px, hint 18px, footer 30px. */
.loading-panel-host > .is-cost .loading-toolbar {
    min-height: 2.3rem;
}

.loading-panel-body .loading-note {
    width: 18rem;
    max-width: 100%;
    height: 1.1rem;
}

.loading-panel-body .loading-note.is-footer {
    height: 1.9rem;
}

.loading-panel-body .loading-cost-layout {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    min-height: 0;
    gap: 0.75rem;
}

.loading-panel-body .loading-cost-layout .loading-chart {
    min-height: 0;
}

/* The cost summary wraps to two columns on phones. */
@container timeline-panel (max-width: 700px) {
    .loading-panel-body .loading-hud.is-tall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loading-panel-body .loading-hud.is-tall .loading-hud-cell {
        min-height: 6rem;
    }

    /* The hint wraps to two lines and the footer grows on phones. */
    .loading-panel-host > .is-cost .loading-note:first-of-type {
        height: 2.25rem;
    }

    .loading-panel-body .loading-note.is-footer {
        height: 2.3rem;
    }
}

@container timeline-panel (max-width: 900px) {
    .timeline-wrapper .loading-panel-host > .is-cost {
        height: auto;
    }

    .loading-panel-body .loading-cost-layout {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
    }

    .loading-panel-body .loading-cost-layout .loading-chart {
        flex: 0 0 auto;
        height: clamp(22rem, 65dvh, 36rem);
        box-sizing: border-box;
    }
}