/* AI Comic Workflow System - Global Styles */
/* This file is required by index.html */

/* ============================================ */
/* 🔥 MAJO Purple — PrimeNG 全局暗色覆盖      */
/* ============================================ */

/* --- PrimeNG 输入框暗色 --- */
.p-inputtext,
.p-textarea,
.p-select,
.p-multiselect,
.p-autocomplete-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e4e4e7 !important;
}

.p-inputtext::placeholder,
.p-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

.p-inputtext:focus,
.p-textarea:focus {
    border-color: rgba(108, 60, 233, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(108, 60, 233, 0.15) !important;
}

/* --- PrimeNG IconField 内图标 --- */
.p-inputicon {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* --- PrimeNG Dialog 暗色 --- */
.p-dialog {
    background: #141419 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.p-dialog-header {
    background: #141419 !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.p-dialog-content {
    background: #141419 !important;
    color: #d4d4d8 !important;
}

.p-dialog-footer {
    background: #141419 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.p-dialog-mask {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px);
}

/* --- PrimeNG Tooltip 暗色 --- */
.p-tooltip-text {
    background: #1e1e28 !important;
    color: #d4d4d8 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* --- PrimeNG ProgressSpinner MAJO Purple --- */
.p-progress-spinner-circle {
    stroke: #6C3CE9 !important;
}

/* --- PrimeNG 按钮边框统一暗灰 --- */
.p-button-outlined,
.p-button-secondary.p-button-outlined {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #a1a1aa !important;
}

.p-button-outlined:hover,
.p-button-secondary.p-button-outlined:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #d4d4d8 !important;
}

/* ============================================ */
/* 🎬 Video Duration Slider — 自定义滑块样式     */
/* ============================================ */
.video-duration-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #a1a1aa;
    cursor: pointer;
    border: none;
}

.video-duration-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #a1a1aa;
    cursor: pointer;
    border: none;
}

.video-duration-slider::-webkit-slider-runnable-track {
    height: 3px;
    background: #3f3f46;
    border-radius: 2px;
}

.video-duration-slider::-moz-range-track {
    height: 3px;
    background: #3f3f46;
    border-radius: 2px;
}

/* Additional global styles can be added here */
/* Most styles are handled by TailwindCSS CDN and inline styles in index.html */

/* ============================================ */
/* 🔥 关键帧模式开关样式 (实验功能) */
/* 删除方式: 删除此块 CSS 和 keyframe-grid.service.ts */
/* ============================================ */
.keyframe-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-left: 12px;
    font-size: 12px;
    color: #888;
    user-select: none;
}

.keyframe-toggle input[type="checkbox"] {
    display: none;
}

.keyframe-toggle .toggle-slider {
    width: 32px;
    height: 16px;
    background: #ccc;
    border-radius: 16px;
    position: relative;
    transition: background 0.2s;
}

.keyframe-toggle .toggle-slider::after {
    content: '';
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
}

.keyframe-toggle input[type="checkbox"]:checked+.toggle-slider {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
}

.keyframe-toggle input[type="checkbox"]:checked+.toggle-slider::after {
    left: 18px;
}

.keyframe-toggle .toggle-label {
    font-weight: 500;
}

.keyframe-toggle input[type="checkbox"]:checked~.toggle-label {
    color: #a855f7;
}

/* ============================================ */
/* 🔥 Skeleton Shimmer — Loading Overlay       */
/* ============================================ */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes dotPulse {

    0%,
    80%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes skeletonFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}