/*
 * Styles for the Creator Dashboard
 */
/* --- Main Layout & Panels --- */
#creator-dashboard-container {
    display: grid;
    grid-template-columns: 260px 400px 1fr;
    gap: 30px;
    padding: 120px 40px 40px;
    height: 100vh;
    box-sizing: border-box;
}

.dashboard-panel,
.scribe-codex-panel,
.scribe-composition-panel {
    background: rgba(15, 17, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#dashboard-composition-panel {
    /* overflow-y: auto; has been removed */
    position: relative;
}

/* --- Body Lock for Modal --- */
body.modal-open {
    overflow: hidden;
    padding-right: var(--scrollbar-width);
}

/* --- Sidebar --- */
#dashboard-sidebar {
    padding: 20px 0;
}

.sidebar-header {
    padding: 0 20px 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.sidebar-nav {
    padding: 20px;
    flex-grow: 1;
    position: relative;
}

.sidebar-nav::after {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    z-index: 0;
    top: 0;
    height: var(--active-tab-height, 52px);
    background-color: #4a90e2;
    border-radius: 6px;
    transform: translateY(var(--active-tab-top, 20px));
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-link {
    display: block;
    padding: 15px 20px;
    color: #a9b3c1;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    position: relative;
    z-index: 1;
}

.sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.sidebar-link.is-active {
    background-color: transparent;
    color: #fff;
    font-weight: bold;
}

.sidebar-footer {
    padding: 20px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-action {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease-out, max-height 0.4s ease-in-out;
}

.footer-action.is-visible {
    opacity: 1;
    max-height: 200px;
}

.codex-create-btn {
    width: 100%;
    padding: 12px;
    background-color: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    position: relative;
    height: 45px;
}

.codex-create-btn:hover {
    background-color: #5aa1f2;
}

.codex-create-btn:disabled {
    background-color: #555;
    cursor: not-allowed;
}

.button-text-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-text {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.button-text.is-active {
    opacity: 1;
}

/* --- Status Legend --- */
.status-legend {
    width: 100%;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.legend-title {
    font-size: 0.9rem;
    font-weight: bold;
    margin: 0 0 12px 0;
    text-align: center;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #ccc;
}

.legend-item:last-child {
    margin-bottom: 0;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}

/* --- Codex Panel (Lists) --- */
.codex-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.codex-header h3,
.codex-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.codex-chapter-list {
    list-style: none;
    margin: 0;
    padding: 10px;
    overflow-y: auto;
    flex-grow: 1;
}

.codex-chapter-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0; /* Changed from '15px' */
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex; /* Added */
    align-items: center; /* Added */
    min-height: 87px; /* Added for consistency */
}

.codex-chapter-card:hover {
    background: rgba(74, 144, 226, 0.1);
    border-color: #4a90e2;
}

.codex-chapter-card.is-selected {
	background: rgba(74, 144, 226, 0.2);
	border-color: #4a90e2;
	transition: border-color 0.2s, background-color 0.2s;
}

.card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    margin: 0 0 8px 0;
}

.card-meta {
    font-size: 0.8rem;
    color: #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-status {
    font-family: monospace;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: bold;
}

.status-pending_review {
    background-color: transparent;
    color: #a9b3c1; /* Changed from yellow to a neutral grey */
}

.status-published {
    background-color: rgba(103, 194, 58, 0.2);
    color: #a4e48c;
}

.status-draft {
    background-color: rgba(144, 147, 153, 0.2);
    color: #d1d5db;
}

.status-changes_requested {
    background-color: rgba(255, 193, 7, 0.2);  /* Changed from red to yellow */
    color: #ffd666;                           /* Changed from red to yellow */
}

.status-declined {
    background-color: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

/* --- Submission View --- */
.sub-tab-nav {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sub-tab-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #a9b3c1;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.sub-tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.sub-tab-btn.is-active {
    background-color: #4a90e2;
    border-color: #4a90e2;
    color: #fff;
    font-weight: bold;
}

.sub-tab-count {
    background-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 0.8rem;
    margin-left: 6px;
    transition: all 0.2s ease-in-out;
}

.sub-tab-btn.is-active .sub-tab-count {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.submission-summary-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    border-left: 4px solid transparent;
}

.submission-summary-card:hover {
    background: rgba(74, 144, 226, 0.1);
}

.submission-summary-card.is-selected {
    background: rgba(74, 144, 226, 0.2);
    border-color: #4a90e2;
    border-left-color: #4a90e2;
}

.notification-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #4a90e2;
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
    box-shadow: 0 0 8px #4a90e2;
    animation: pulse 2s infinite;
}

.action-required-badge {
    color: #fca5a5;
    font-weight: bold;
    font-size: 0.8rem;
    margin-left: auto;
}

.submission-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: #ccc;
}

/* --- Composition Panel & Editor --- */
.composition-header {
    padding: 15px 25px;
    padding-right: 240px;
    /* --- MODIFIED --- */
    border-bottom: none; /* Remove the actual border, will be replaced by ::before */
    position: relative;  /* Essential for positioning pseudo-elements */
    /* --- Keep existing flexbox --- */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* --- REMOVED: min-height: 100px; --- */
}

.composition-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
}

.composition-actions button {
    margin-left: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    border: none;
}

.delete-btn-header {
    background-color: #d9534f;
    color: #fff;
    margin-right: auto;
}

.composition-canvas {
    padding: 25px;
}

.composition-welcome-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #aaa;
}

.composition-welcome-view h3 {
    font-size: 1.5rem;
}

.admin-feedback-box {
    padding: 15px;
    margin-top: 25px;
    margin-bottom: 25px;
    border: 1px solid #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
    border-radius: 6px;
    color: #fca5a5;
}

/* --- NEW: Add this modifier for approved submissions --- */
.admin-feedback-box.is-approval {
    border-color: #22c55e; /* Green border */
    background-color: rgba(34, 197, 94, 0.1); /* Green background */
    color: #a4e48c; /* Lighter green text */
}

.admin-feedback-box.is-approval h4 {
    color: #fff;
}

.admin-feedback-box h4 {
    margin: 0 0 10px 0;
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.acknowledge-btn {
    background-color: #f59e0b;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
}

.acknowledge-btn:hover {
    background-color: #fbbf24;
}

/* --- Content Editor Blocks --- */
.content-editor-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.content-block {
    position: relative;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding-left: 60px;
}

.content-block.is-focused {
    border-color: #4a90e2;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.2);
}

.block-toolbar {
    position: absolute;
    left: 10px;
    top: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toolbar-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ccc;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.toolbar-btn:hover {
    background-color: #4a90e2;
    color: #fff;
}

.toolbar-btn.delete-btn:hover {
    background-color: #d9534f;
}

.toolbar-btn svg {
    width: 18px;
    height: 18px;
}

.block-type-menu {
    position: absolute;
    left: 55px;
    top: 95px;
    background: #1a1c29;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    z-index: 10;
    padding: 5px;
    display: flex;
    flex-direction: column;
    width: 150px;
}

.block-type-menu button {
    background: transparent;
    border: none;
    color: #ccc;
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
}

.block-type-menu button:hover {
    background-color: rgba(74, 144, 226, 0.3);
    color: #fff;
}

.heading-input,
.paragraph-input,
.image-caption-input,
.video-url-input,
.quote-text-input,
.quote-character-input,
.log-timestamp-input,
.log-text-input {
    width: 100%;
    background: transparent;
    border: none;
    color: #f1f1f1;
    font-size: 1rem;
    padding: 0;
    margin: 0;
    outline: none;
    resize: vertical;
}

.heading-input {
    font-size: 1.5rem;
    font-weight: bold;
}

.paragraph-input {
    line-height: 1.6;
    min-height: 120px;
}

/* --- Modal Styles --- */
.scheduler-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(9, 10, 15, 0.7);
    backdrop-filter: blur(8px);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    
    /* --- ADD THESE LINES --- */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease, visibility 0.3s ease;
}

/* This new rule defines the final, visible state that triggers the animation */
.scheduler-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.scheduler-modal-content {
    background: #0f111a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 30px;
    width: 100%;
    max-width: 600px;
}

.scheduler-modal-content h3 {
    margin: 0 0 10px 0;
    text-align: center;
    font-size: 1.5rem;
}

.scheduler-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 30px;
}

.scheduler-actions button {
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    border: none;
}

.schedule-cancel-btn {
    background-color: #777;
    color: #fff;
}

.schedule-confirm-btn {
    background-color: #4a90e2;
    color: #fff;
}

.field-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 5px;
    padding: 0 2px;
}

.char-counter.is-limit {
    color: #fca5a5;
    font-weight: bold;
}

.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

/* --- Animations --- */
#dashboard-codex-panel,
#dashboard-composition-panel {
    transition: opacity 0.25s ease-in-out;
}

#dashboard-codex-panel.is-transitioning,
#dashboard-composition-panel.is-transitioning {
    opacity: 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(74, 144, 226, 0);
    }
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0);
    }
}

/* --- Full-Page Editor Layout --- */
.full-editor-layout {
    display: grid;
    grid-template-columns: 80px 1fr 320px;
    grid-template-rows: 100vh;
    height: 100vh;
    overflow: hidden;
}

.lore-editor-layout.is-side-panel-closed {
    grid-template-columns: 300px 1fr 0; /* Left panel, main content, right panel (hidden) */
}

.editor-actions-toolbar {
    grid-column: 1 / 2;
    background: rgba(15, 17, 26, 0.8);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 160px;
    gap: 20px;
    z-index: 101;
    position: relative;
}

.editor-actions-toolbar .save-draft-btn,
.editor-actions-toolbar .side-panel-toggle-btn {
    width: 50px;
    height: 50px;
    padding: 10px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-direction: column;
    gap: 5px;
    line-height: 1;
}

.editor-actions-toolbar .save-draft-btn {
    background-color: #4a90e2;
    color: #fff;
}

.editor-actions-toolbar .side-panel-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ccc;
    padding: 5px;
}

.editor-actions-toolbar .back-to-dash-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #a9b3c1;
    transition: color 0.2s, background-color 0.2s;
    border-radius: 5px;
    position: absolute;
    top: 90px;
}

.editor-actions-toolbar .back-to-dash-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.editor-main-column {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-top: 75px;
}

.composition-canvas.is-full-editor {
    padding: 20px 40px 40px;
    flex-grow: 1;
}

.editor-side-panel {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    transition: all 0.3s ease-in-out;
    padding-top: 75px;
    box-sizing: border-box;
}

.side-panel-header {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.side-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.side-panel-content {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1;
}

/* --- Buttons --- */
.action-btn-secondary {
    background-color: transparent;
    color: #a9b3c1;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #4a90e2;
    color: #fff;
}

.resubmit-btn {
    background-color: #4a90e2;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

/* --- Loading States --- */
#interactive-loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    transition: opacity 0.5s ease-out;
}

#interactive-loader-container.is-hiding {
    opacity: 0;
    pointer-events: none;
}

.loader-box {
    text-align: center;
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #4a90e2;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
    margin: 0 auto 25px;
}

.loader-text {
    font-family: 'monospace', 'Courier New', Courier;
    transition: opacity 0.3s ease-in-out;
    color: #a9b3c1;
}

#loader-percentage {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
}

#loader-status-text {
    font-size: 1rem;
    min-height: 1.2rem;
}
.status-under-review {
    background-color: rgba(139, 92, 246, 0.2); /* Violet */
    color: #c4b5fd;
}


.tier-badge-large {
    width: 100%;
    padding: 8px;
    font-weight: bold;
    text-align: center;
    border-radius: 6px;
    text-transform: capitalize;
    font-size: 1.1rem;
    margin-bottom: 15px;
}
.tier-badge-large.tier-inexperienced { background-color: rgba(100, 116, 139, 0.2); color: #94a3b8; }
.tier-badge-large.tier-experienced { background-color: rgba(74, 144, 226, 0.2); color: #a9cfff; }
.tier-badge-large.tier-trusted { background-color: rgba(103, 194, 58, 0.2); color: #a4e48c; }
.progress-item { margin-bottom: 10px; }
.progress-item label { font-size: 0.8rem; color: #ccc; }
.progress-item span { font-size: 0.75rem; color: #8b949e; float: right; }
.progress-bar { width: 100%; height: 8px; background-color: rgba(0,0,0,0.3); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.progress-fill { height: 100%; background-color: #4a90e2; border-radius: 4px; transition: width 0.5s ease; }

/* --- CREATOR STATUS PANEL (INTERACTIVE) --- */
.creator-status-panel {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.creator-status-panel:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: scale(1.02);
}
.creator-status-panel h4 {
    margin: 0 0 10px 0;
    font-size: 0.8rem;
    color: #8b949e;
    text-transform: uppercase;
}
.tier-badge-large { /* Unchanged but included for context */ }

/* --- TIER INFO MODAL --- */
.tier-info-modal {
    max-width: 900px !important;
    width: 90%;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* Add this line */
}
.scheduler-modal-overlay.is-visible .tier-info-modal {
    transform: translateY(0) scale(1);
}
.tier-info-modal h2 {
    text-align: center;
    margin: -5px 0 25px 0;
}
.tier-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}
.tier-column {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: stagger-fade-in 0.5s ease-out forwards;
}
.tier-column h3 {
    margin: 0 0 15px 0;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}
.tier-benefits {
    list-style: '✓  ';
    padding-left: 20px;
    margin: 0;
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.6;
}
.tier-column.is-current {
    border-color: #4a90e2;
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.3);
    transform: translateY(10px) scale(1.05);
}
.tier-column.is-next-goal {
    border-color: rgba(103, 194, 58, 0.5);
}
.tier-progress-details h3 {
    font-size: 1rem;
    text-align: center;
    color: #8b949e;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.tier-progress-details .progress-item {
    max-width: 500px;
    margin: 0 auto 15px;
}
.tier-progress-details .progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}
.tier-progress-details .progress-labels label { color: #ccc; }
.tier-progress-details .progress-labels span { color: #8b949e; }
.tier-progress-details .progress-bar .progress-fill {
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1); /* Animation for the fill */
}
@keyframes stagger-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* In creator-dashboard-styles.css, add this to the end of the file */

/* Style for the new 'live_review' status badge */
.status-live_review {
    background-color: rgba(74, 144, 226, 0.2); /* Blue background */
    color: #a9cfff;
    animation: pulse-blue 2s infinite; /* Apply the pulsing animation */
}

/* Keyframe animation for the pulsing effect */
@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(74, 144, 226, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0);
    }
}

/* In creator-dashboard-styles.css */

.interactive-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    height: 100%;
    color: #9ca3af;
    box-sizing: border-box;
}

.interactive-empty-state h3 {
    font-size: 1.2rem;
    color: #fff;
    margin: 0 0 10px 0;
}

.interactive-empty-state p {
    margin: 0 0 20px 0;
    max-width: 300px;
    line-height: 1.6;
}

.empty-state-action {
    background-color: transparent;
    border: 1px solid #4a5568;
    color: #a9b3c1;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.empty-state-action:hover {
    background-color: rgba(74, 144, 226, 0.1);
    border-color: #4a90e2;
    color: #fff;
}
/* In creator-dashboard-styles.css */

.submission-summary-card .card-title {
    display: flex;
    align-items: center;
    gap: 10px; /* Adds space between the icon and the title text */
}

.submission-type-icon {
    width: 18px;
    height: 18px;
    color: #8b949e; /* Muted gray color to blend in */
    flex-shrink: 0; /* Prevents the icon from being squished */
}

/* In creator-dashboard-styles.css */

/* --- FINAL Submission Status Tracker --- */
.submission-status-tracker {
    width: 100%;
    padding: 25px 0 35px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 25px;
}

.tracker-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tracker-step {
    flex: 1; /* Makes each step take up equal space */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Gray background line connecting the nodes */
.tracker-step:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 12px; /* Vertically centers the 4px line on the 24px node */
    right: 50%;
    width: 100%;
    height: 4px;
    background-color: #4a5568;
    z-index: 0;
}

/* Colored progress line that animates over the gray line */
.tracker-step:not(:first-child)::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 50%;
    width: 100%;
    height: 4px;
    background-color: #4a90e2; /* Default blue */
    z-index: 1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease;
}

/* Animate the line when a step is complete OR active */
.tracker-step.is-complete:not(:first-child)::after,
.tracker-step.is-active:not(:first-child)::after {
    transform: scaleX(1);
    transform-origin: left;
}

.tracker-node {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #4a5568;
    position: relative; /* Changed from z-index to position for stacking */
    z-index: 2; /* Ensure node is on top of the line */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s ease;
}

.tracker-node svg {
    width: 14px;
    height: 14px;
    color: #0f111a; /* Dark color for better contrast on light backgrounds */
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tracker-label {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #8b949e;
    font-weight: 500;
    transition: color 0.4s ease;
}

/* --- State Styles --- */
.tracker-step.is-complete .tracker-node { background-color: #4a90e2; }
.tracker-step.is-complete .tracker-label { color: #e2e8f0; }
.tracker-step.is-complete .tracker-node svg,
.tracker-step.is-active .tracker-node svg { transform: scale(1); }

.tracker-step.is-active .tracker-label { color: #4a90e2; font-weight: bold; }
.tracker-step.is-active .tracker-node { background-color: #4a90e2; }
.tracker-step.is-active .tracker-node .spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}



/* Final Outcome Overrides */
/* in creator-dashboard-styles.css */

.submission-status-tracker.is-approved .tracker-step.is-complete:not(:first-child)::after,
.submission-status-tracker.is-approved .tracker-step.is-active:not(:first-child)::after {
    background-color: #22c55e;
}
.submission-status-tracker.is-approved .tracker-step.is-complete .tracker-node { background-color: #22c55e; }
.submission-status-tracker.is-approved .tracker-step.is-active .tracker-label { color: #a4e48c; }
.submission-status-tracker.is-approved .tracker-step.is-active .tracker-node {
    background-color: #22c55e; /* This makes the node background green */
    border: 2px solid #a4e48c;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); /* This adds a matching green glow */
}


.submission-status-tracker.is-declined .tracker-step.is-complete:not(:first-child)::after { background-color: #ef4444; }
.submission-status-tracker.is-declined .tracker-step.is-complete .tracker-node { background-color: #ef4444; }
.submission-status-tracker.is-declined .tracker-step.is-active .tracker-label { color: #fca5a5; }
.submission-status-tracker.is-declined .tracker-step.is-active .tracker-node { border: 2px solid #fca5a5; }

/* in creator-dashboard-styles.css */

.submission-status-tracker.is-changes-requested .tracker-step.is-complete:not(:first-child)::after,
.submission-status-tracker.is-changes-requested .tracker-step.is-active:not(:first-child)::after {
    background-color: #f59e0b; /* Orange */
}

.submission-status-tracker.is-changes-requested .tracker-step.is-complete .tracker-node {
    background-color: #f59e0b; /* Orange */
}

.submission-status-tracker.is-changes-requested .tracker-step.is-active .tracker-label {
    color: #fbbf24; /* Lighter Orange */
}

.submission-status-tracker.is-changes-requested .tracker-step.is-active .tracker-node {
    background-color: #f59e0b;
    border: 2px solid #fbbf24;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.submission-status-tracker.is-changes-requested .tracker-step.is-active .tracker-node svg {
    transform: scale(1);
    color: #0f111a; /* Changed from white to black for consistency */
    animation: exclamation-pulse 1.5s infinite ease-in-out; /* Added subtle pulse animation */
}

/* Tooltip */
.tracker-node .tracker-tooltip {
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1a1c29;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
}
.tracker-node:hover .tracker-tooltip {
    opacity: 1;
    visibility: visible;
}

/* In creator-dashboard-styles.css */

/* --- Final Outcome Color Override --- */
/* When the tracker is approved, make all completed nodes green */
.submission-status-tracker.is-approved .tracker-step.is-complete .tracker-node {
    background-color: #22c55e;
}

/* When the tracker is declined, make all completed nodes red */
.submission-status-tracker.is-declined .tracker-step.is-complete .tracker-node {
    background-color: #ef4444;
}

/* In creator-dashboard-styles.css */

/* Ensure the spinner still overrides the pulse on the 'In Review' step */
.tracker-step.is-active .tracker-node .spinner {
    animation: spin 1s linear infinite; /* Keeps its original spin animation */
}

/* In creator-dashboard-styles.css */
.urgent-warning-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    color: #f59e0b; /* Amber/Yellow color */
    cursor: help;
}

.urgent-warning-icon svg {
    width: 20px;
    height: 20px;
}

/* In creator-dashboard-styles.css */

/* --- NEW: Suspended Status Tracker Styles --- */
.submission-status-tracker.is-suspended .tracker-step.is-complete:not(:first-child)::after,
.submission-status-tracker.is-suspended .tracker-step.is-active:not(:first-child)::after {
    background-color: #f59e0b; /* Orange */
}

.submission-status-tracker.is-suspended .tracker-step.is-complete .tracker-node {
    background-color: #f59e0b; /* Orange */
}

.submission-status-tracker.is-suspended .tracker-step.is-active .tracker-label {
    color: #fbbf24; /* Lighter Orange */
    font-weight: bold;
}

.submission-status-tracker.is-suspended .tracker-step.is-active .tracker-node {
    background-color: #f59e0b;
    border: 2px solid #fbbf24;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.submission-status-tracker.is-suspended .tracker-step.is-active .tracker-node svg {
    transform: scale(1);
    color: #fff;
}
/* This makes the whole card have an orange border when suspended */
.submission-summary-card.is-suspended {
    border-left: 4px solid #f59e0b;
}

/* This adds the glow to the status badge inside a suspended card */
.submission-summary-card.is-suspended .card-status {
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
/* --- NEW: Informational Message Box --- */
.submission-message {
    margin-top: 25px;
    padding: 15px;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.6;
    border-left-width: 4px;
    border-left-style: solid;
    margin-bottom: 25px; /* Add this line */
}

.submission-message.is-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
    color: #fbbf24;
}

/* In creator-dashboard-styles.css */

/* --- NEW: Submission Sort Controls --- */
.codex-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.codex-header-main {
    flex-grow: 1;
}

.codex-sort-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sort-label {
    font-size: 0.8rem;
    color: #8b949e;
    font-weight: 500;
}

.submission-sort-dropdown {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    color: #fff;
    padding: 5px 8px;
    font-size: 0.85rem;
}

/* --- NEW: Card Date Display --- */
.submission-summary-card {
    position: relative;
    padding-bottom: 30px;
}

.card-date-display {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.75rem;
    color: #8b949e;
    font-family: monospace;
}

.submission-group-header:first-of-type {
    margin-top: 0;
}


.submission-group-header {
    font-size: 0.8rem;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 15px 10px 5px;
    margin-top: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.codex-chapter-list > .submission-group-header:first-of-type {
    margin-top: 0;
}

/* In creator-dashboard-styles.css */

/* --- NEW: Suspended Message Box Styles --- */
.submission-message.is-warning .message-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.submission-message.is-warning p {
    margin: 0;
    flex-grow: 1;
}

.reason-button {
    background-color: transparent;
    border: 1px solid #f59e0b;
    color: #f59e0b;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s, color 0.2s;
}

.reason-button:hover {
    background-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.reason-text {
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 4px;
    white-space: pre-wrap; /* Preserves line breaks from the admin's note */
    line-height: 1.6;
    max-height: 40vh;
    overflow-y: auto;
}

/* --- Reason Modal Text Box --- */
.reason-text {
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 4px;
    white-space: pre-wrap; /* This respects line breaks in the reason text */
    line-height: 1.6;
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    color: #e2e8f0; /* Lighter text color for readability */
}

/* --- NEW: Resolved Message Box Styles --- */
.submission-message.is-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
    color: #86efac;
}

.submission-message.is-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #fca5a5;
}

/* --- Resolution Icon for Resolved Suspensions --- */
.resolution-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #0f111a; /* Dark text for contrast */
    background-color: #a4e48c; /* Green to match 'approved' status */
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 14px;
    margin-left: 5px;
    cursor: help;
    vertical-align: middle;
}

.card-status.status-declined .resolution-icon,
.card-status.status-changes_requested .resolution-icon {
    background-color: #fca5a5; /* Red/Orange for declined or changes requested status */
}

/* === NEW: CORRECTION VIEWER UI STYLES === */

/* --- Modal & Layout --- */
.focus-mode-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #090a0f;
    z-index: 4000;
    padding-top: 75px; /* Account for main site header */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.review-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    height: 70px;
    background: rgba(15, 17, 26, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.submission-title-group h2 { margin: 0; font-size: 1.2rem; }
.submission-title-group span { font-size: 0.9rem; color: #9ca3af; }

.viewer-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.focus-mode-close-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 2rem;
    line-height: 40px;
    text-align: center;
    transition: transform 0.2s, background-color 0.2s;
}

.focus-mode-close-btn:hover {
    transform: scale(1.1) rotate(90deg);
    background-color: #ef4444;
}

/* --- Main 2-Column Layout --- */
.scribe-command-console-layout.is-two-column {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Content | Feedback */
    gap: 20px;
    padding: 20px;
    height: calc(100% - 70px);
    overflow: hidden;
}

.console-panel {
    background: rgba(15, 17, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.console-panel .panel-content {
    padding: 25px;
    overflow-y: auto;
    flex-grow: 1;
}

/* --- Left Panel: Content Editor --- */
.correction-content-block {
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 10px;
    border-left: 3px solid transparent;
    transition: background-color 0.3s;
}

.correction-content-block p {
    margin: 0;
    line-height: 1.7;
    cursor: text;
    padding: 8px 12px;
    border: 1px solid transparent;
}

.correction-content-block textarea {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid #4a90e2;
    border-radius: 4px;
    color: #f1f1f1;
    font-size: 1rem;
    line-height: 1.7;
    padding: 8px 12px;
    resize: none;
    overflow-y: hidden; /* Hide scrollbar for auto-resize */
}

.correction-content-block.has-feedback-open {
    border-left-color: #f59e0b; /* Orange */
    background-color: rgba(245, 158, 11, 0.05);
}

.correction-content-block.has-feedback-resolved {
    border-left-color: #22c55e; /* Green */
    background-color: rgba(34, 197, 94, 0.05);
}

.correction-content-block.is-highlighted {
    animation: highlight-pulse 1.5s ease-out;
}

@keyframes highlight-pulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.4); }
    100% { box-shadow: 0 0 0 20px rgba(74, 144, 226, 0); }
}

/* --- Right Panel: Feedback Hub --- */
.panel-divider {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #8b949e;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    line-height: 0.1em;
    margin: 25px 0;
}
.panel-divider span {
    background: #0f111a;
    padding: 0 10px;
}
.overall-notes-display {
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 6px;
    font-style: italic;
    color: #d1d5db;
    line-height: 1.6;
}
.feedback-progress-container {
    margin-top: 15px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 4px;
    overflow: hidden;
    height: 8px;
}
#feedback-progress-bar {
    width: 0%;
    height: 100%;
    background-color: #4a90e2;
    transition: width 0.4s ease;
}
#feedback-progress-text {
    font-size: 0.8rem;
    color: #a9b3c1;
    margin-top: 8px;
    text-align: center;
}

.feedback-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}
.feedback-item {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    border-left: 3px solid #f59e0b;
    padding: 12px;
    cursor: pointer;
    transition: opacity 0.3s, background-color 0.3s;
}
.feedback-item:hover {
    background: rgba(0,0,0,0.4);
}
.feedback-item.is-resolved {
    opacity: 0.6;
    border-left-color: #22c55e;
    text-decoration: line-through;
}
.feedback-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 8px;
}
.resolve-btn {
    background: none;
    border: 1px solid #a9b3c1;
    color: #a9b3c1;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
}
.feedback-item.is-resolved .resolve-btn {
    background: #22c55e;
    color: #fff;
    border-color: #22c55e;
}


/* Add this new rule for our "Resubmitted" status */
.status-pending-correction {
    background-color: rgba(139, 92, 246, 0.2); /* Violet background */
    color: #c4b5fd; /* Light violet text */
}

.card-status.status-pending-correction {
    border-color: #a78bfa;
}

.legend-dot.status-pending-correction {
    background-color: #a78bfa;
}

/* --- NEW: Action Buttons Container --- */
.feedback-actions {
    margin-top: 20px; /* Adds space above the buttons */
    margin-bottom: 25px; /* Adds space below the buttons */
    display: flex;
    gap: 15px; /* Space between the buttons */
    align-items: center;
}

/* --- NEW: Secondary Appeal Button Style --- */
.appeal-btn {
    background-color: transparent;
    border: 1px solid #f59e0b; /* Orange border to match the feedback box */
    color: #f59e0b; /* Orange text */
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.appeal-btn:hover {
    background-color: rgba(245, 158, 11, 0.1); /* Subtle orange glow on hover */
    color: #fbbf24;
}

/* --- NEW: Action Required Panel --- */
.action-required-panel {
    background-color: rgba(245, 158, 11, 0.05); /* Very subtle orange background */
    border: 1px solid rgba(245, 158, 11, 0.3); /* Orange border */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px; /* Space between this panel and the status tracker */
}

.action-required-panel h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: #fbbf24; /* Bright orange to grab attention */
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-required-panel p {
    margin: 0 0 20px 0;
    color: #d1d5db; /* Lighter text for readability */
    font-size: 0.9rem;
    line-height: 1.6;
}

/* This re-uses the button container style we created previously */
.feedback-actions {
    margin-top: 0;
    margin-bottom: 0;
}

/* /creator-dashboard-styles.css */
/* Add these new rules to the end of the file */

/* --- NEW: Header Action Buttons --- */
.submission-actions-header {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- NEW: Collapsible Summary --- */
.summary-container {
    margin-top: 25px;
}

.summary-toggle-btn {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a9b3c1;
    padding: 12px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.summary-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.summary-toggle-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease-in-out;
}

.summary-container.is-open .summary-toggle-btn svg {
    transform: rotate(180deg);
}

.summary-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out;
    padding: 0 10px; /* Padding will be applied when open */
}

.summary-container.is-open .summary-content {
    max-height: 500px; /* Animate to this height */
    opacity: 1;
    padding: 20px 10px; /* Add padding when open */
}

.summary-content p {
    margin: 0;
    line-height: 1.7;
}

/* /creator-dashboard-styles.css */
/* Add these new rules to the end of the file */

/* --- NEW: Summary Modal Styles --- */
.summary-modal-content {
    max-width: 700px !important; /* A bit wider for better summary reading */
}

.summary-modal-body {
    padding: 10px 0;
    max-height: 60vh; /* Prevent very long summaries from making the modal too tall */
    overflow-y: auto;
    line-height: 1.8;
    color: #d1d5db;
}

/* Re-style the button container for the summary */
.summary-container {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-container h4 {
    margin: 0 0 15px 0;
    font-size: 1rem;
    color: #ccc;
}

/* --- NEW: Draft System UI --- */

/* Icon next to the title in the "My Database Entries" list */
.draft-indicator-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    vertical-align: middle;
    background-color: #f59e0b; /* Orange for draft in progress */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'%3E%3C/path%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'%3E%3C/path%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Icon for a draft that is pending admin review */
.draft-indicator-icon.is-pending {
    background-color: #4a90e2; /* Blue for pending review */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z'%3E%3C/path%3E%3Cpath d='m9 12 2 2 4-4'%3E%3C/path%3E%3C/svg%3E");
}

/* Container for the Live/Draft toggle buttons */
.view-toggle-container {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

/* --- NEW: Live/Draft View Toggle Buttons --- */
.view-toggle-container .toggle-btn {
    flex-grow: 1;
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid #4a5568;
    color: #a9b3c1;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-container .toggle-btn:hover {
    background-color: rgba(74, 144, 226, 0.1);
    color: #fff;
}

.view-toggle-container .toggle-btn.is-active {
    background-color: #4a90e2;
    border-color: #4a90e2;
    color: #fff;
}

@keyframes exclamation-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* in creator-dashboard-styles.css */

/* =================================================================== */
/* NEW: Correction-Specific Status Tracker
/* =================================================================== */

.correction-tracker .tracker-step:not(:first-child)::after {
    background-color: #f59e0b; /* Base color for this tracker's lines */
}

.correction-tracker .tracker-step.is-complete .tracker-node {
    background-color: #f59e0b;
}

.correction-tracker .tracker-step.is-active .tracker-label {
    color: #fbbf24;
    font-weight: bold;
}

.correction-tracker .tracker-step.is-active .tracker-node {
    background-color: #f59e0b;
    border: 2px solid #fbbf24;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.correction-tracker .tracker-step.is-active .tracker-node svg {
    color: #0f111a;
    transform: scale(1);
    animation: exclamation-pulse 1.5s infinite ease-in-out;
}

/* --- Special Rerouting/Escalation Style (Violet) --- */
.correction-tracker .tracker-step.is-rerouted.is-active .tracker-label,
.correction-tracker .tracker-step.is-rerouted.is-complete .tracker-label {
    color: #c4b5fd; /* Violet */
}

.correction-tracker .tracker-step.is-rerouted.is-active .tracker-node,
.correction-tracker .tracker-step.is-rerouted.is-complete .tracker-node {
    background-color: #8b5cf6; /* Violet */
    border-color: #c4b5fd;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

.correction-tracker .tracker-step.is-rerouted:not(:first-child)::after {
    background-color: #8b5cf6; /* Violet line */
}

/* in creator-dashboard-styles.css */

/* --- (NEW) Final State Overrides for Correction Tracker --- */

/* Approved State (Green) */
.correction-tracker.is-approved .tracker-step.is-complete:not(:first-child)::after {
    background-color: #22c55e;
}
.correction-tracker.is-approved .tracker-step.is-complete .tracker-node {
    background-color: #22c55e;
    border-color: #a4e48c;
    box-shadow: none;
}
.correction-tracker.is-approved .tracker-step.is-complete .tracker-label {
    color: #e2e8f0;
}
.correction-tracker.is-approved .tracker-step.is-active .tracker-label {
    color: #a4e48c;
}

/* Declined State (Red) */
.correction-tracker.is-declined .tracker-step.is-complete:not(:first-child)::after {
    background-color: #ef4444;
}
.correction-tracker.is-declined .tracker-step.is-complete .tracker-node {
    background-color: #ef4444;
    border-color: #fca5a5;
    box-shadow: none;
}
.correction-tracker.is-declined .tracker-step.is-complete .tracker-label {
    color: #e2e8f0;
}
.correction-tracker.is-declined .tracker-step.is-active .tracker-label {
    color: #fca5a5;
}

/* --- NEW: Story Detail Tab Navigation --- */
.story-tab-nav {
    display: flex;
    padding: 0 25px;
     /* --- Add padding-right --- */
    padding-right: 240px; /* Match header padding */
     /* --- End Add --- */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    position: relative; /* Keep relative for indicator */
}

.story-tab-btn {
    padding: 15px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    background: transparent;
    border: none;
    color: #8b949e;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -1px; /* Aligns border with bottom panel border */
}

.story-tab-btn:hover {
    color: #fff;
}

.story-tab-btn.is-active {
    color: #4a90e2;
    border-bottom-color: #4a90e2;
}

.composition-canvas.has-tabs {
    padding-top: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* The 'overflow-y' property is removed from here */
}

/* --- NEW: Story Overview Tab Layout --- */
.story-overview-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    padding: 0;
}

.story-overview-grid h4 {
    font-size: 0.9rem;
    color: #8b949e;
    text-transform: uppercase;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.story-overview-main p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #d1d5db;
    margin: 0 0 25px 0;
}

.story-overview-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.9rem;
}

.story-overview-cover-image {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    object-fit: cover;
    background-color: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
}

.story-overview-cover-image.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b949e;
    font-size: 0.9rem;
}

.story-overview-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
    text-align: center;
}

.stat-item .stat-value {
    font-size: 1.75rem;
    font-weight: bold;
    color: #fff;
}

.stat-item .stat-label {
    font-size: 0.8rem;
    color: #8b949e;
}

/* --- START: REPLACEMENT CODE BLOCK --- */

.chapter-list-header {
    position: relative; /* Establishes a container for the absolute positioning of children */
    padding: 0 25px; /* Horizontal padding only */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    height: 86px; /* A compact, fixed height */
    box-sizing: border-box;
    overflow: hidden; /* Prevents content from spilling during animation */
}

.header-grid-view-controls,
.header-details-view-controls {
    position: absolute;
    top: 0;
    left: 25px;
    right: 25px;
    height: 100%; /* Fill the parent's new, smaller height */
    display: flex;
    justify-content: space-between;
    align-items: center; /* This now correctly vertically centers the content */
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.header-grid-view-controls h3 {
    margin: 0;
    font-size: 1.2rem;
}

.header-grid-view-controls .codex-create-btn {
    padding: 10px 20px;
    height: auto;
}

/* --- NEW Horizontal Animation Logic --- */

/* Default State (Grid View Active) */
.chapter-list-header.is-grid-view .header-grid-view-controls {
    opacity: 1;
    transform: translateX(0);
}
.chapter-list-header.is-grid-view .header-details-view-controls {
    opacity: 0;
    transform: translateX(30px); /* Start hidden and shifted to the right */
    pointer-events: none;
}

/* Details View Active State */
.chapter-list-header.is-details-view .header-grid-view-controls {
    opacity: 0;
    transform: translateX(-30px); /* Animate out by shifting to the left */
    pointer-events: none;
}
.chapter-list-header.is-details-view .header-details-view-controls {
    opacity: 1;
    transform: translateX(0);
}


.chapter-management-layout {
    overflow: hidden; /* This contains the animations */
    display: flex;
    flex-direction: column;
    /* The height is now controlled by the flex container it lives in */
    flex-grow: 1; 
    position: relative;
}

/* This is the content that slides in */
.chapter-grid-container,
.chapter-details-panel-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Remove padding from the animated containers */
.chapter-grid-container.is-sliding-in,
.chapter-details-panel-wrapper.is-sliding-in {
    padding-top: 0; 
}

/* --- END: REPLACEMENT CODE BLOCK --- */

.chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    overflow-y: auto;
    flex-grow: 1;
}

.chapter-grid-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    box-sizing: border-box;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.chapter-grid-card.is-selected {
    border-color: #4a90e2;
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.4);
}

.chapter-card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: rgba(0,0,0,0.3);
    transition: transform 0.4s ease;
}

.chapter-grid-card:hover .chapter-card-bg-image {
    transform: scale(1.1);
}

.chapter-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 10%, transparent 60%);
}

.chapter-card-number,
.chapter-card-title {
    position: relative;
    z-index: 2;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.chapter-card-number {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    position: absolute;
    top: 10px;
    left: 12px;
}

.chapter-card-title {
    font-size: 0.9rem;
    font-weight: 500;
}

/* --- NEW: Chapter Details Panel --- */
.chapter-details-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #8b949e;
    font-size: 1.1rem;
    text-align: center;
    border: 2px dashed rgba(255,255,255,0.1);
    border-radius: 8px;
}

/* --- START: REPLACEMENT CODE BLOCK --- */

/* This turns the container into our new 2-column grid */
.chapter-details-container {
    flex-grow: 1;
    overflow-y: auto; /* Fallback scrolling, though the goal is to avoid it */
    display: grid;
    grid-template-columns: 220px 1fr; /* Fixed width for image, rest for content */
    gap: 25px;
    padding-top: 10px; /* Small gap from the back button */
}

/* This styles the cover image in the left column */
.chapter-details-cover {
    width: 100%;
    aspect-ratio: 2 / 3; /* Portrait aspect ratio for a book cover feel */
    border-radius: 8px;
    background-color: rgba(0,0,0,0.3);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b949e;
    border: 1px solid rgba(255,255,255,0.1);
}

/* This ensures the right column content is laid out correctly */
.chapter-details-content {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Allows only this column to scroll if absolutely necessary */
}

/* --- END: REPLACEMENT CODE BLOCK --- */
.chapter-details-content h2 {
    margin: 5px 0 15px 0;
    font-size: 1.5rem;
    display: flex; /* Aligns title and icon */
    align-items: center; /* Vertically centers them */
    flex-wrap: wrap; /* Allows badges to wrap if title is long */
}
.chapter-details-summary {
    font-size: 0.9rem;
    color: #d1d5db;
    line-height: 1.6;
    margin-bottom: 20px;
}
.chapter-details-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}
.details-stat-item {
    text-align: center;
}
.details-stat-item span {
    display: block;
    font-size: 0.8rem;
    color: #8b949e;
    margin-bottom: 5px;
}
.details-stat-item strong {
    font-size: 1.2rem;
    font-weight: bold;
}
.stat-green { color: #a4e48c; }
.stat-yellow { color: #ffd666; }

.chapter-list-header .header-action-buttons {
    display: flex;
    gap: 10px;
}

.action-btn-primary, .action-btn-danger {
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s;
}
.action-btn-primary {
    flex-grow: 1;
    background-color: #4a90e2;
    color: #fff;
}
.action-btn-primary:hover {
    background-color: #5aa1f2;
}
.action-btn-danger {
    background-color: transparent;
    border: 1px solid #d9534f;
    color: #d9534f;
}
.action-btn-danger:hover {
    background-color: rgba(217, 83, 79, 0.1);
}
.action-btn-primary svg, .action-btn-danger svg {
    width: 16px;
    height: 16px;
}

/* --- NEW: Chapter Management Sliding Animations --- */
@keyframes slideInFromRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

.chapter-management-layout {
    overflow: hidden; /* Contains the animations */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chapter-grid-container.is-sliding-in,
.chapter-details-panel-wrapper.is-sliding-in {
    animation-duration: 0.4s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.chapter-grid-container.is-sliding-in {
    animation-name: slideInFromLeft;
}

.chapter-details-panel-wrapper.is-sliding-in {
    animation-name: slideInFromRight;
}

/* --- NEW: Chapter Details Panel --- */
.chapter-details-panel-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
}

.chapter-details-header {
    margin-bottom: 20px;
    flex-shrink: 0;
}

.back-to-grid-btn {
    background: none;
    border: 1px solid #4a5568;
    color: #a9b3c1;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.back-to-grid-btn:hover {
    background-color: #4a5568;
    color: #fff;
}

/* This makes sure the details container scrolls, not the whole panel */
.chapter-details-container {
    flex-grow: 1;
    overflow-y: auto;
}

/* /creator-dashboard-styles.css */

/* --- NEW: Story Overview Cover Image Uploader --- */
.story-overview-cover-image.is-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    border-style: dashed;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.3);
    color: #8b949e;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    background-color: transparent; /* Ensure it's not the default placeholder color */
}

.story-overview-cover-image.is-uploader:hover {
    background-color: rgba(74, 144, 226, 0.1);
    border-color: #4a90e2;
    color: #fff;
}

.story-overview-cover-image.is-uploader svg {
    width: 48px;
    height: 48px;
    stroke-width: 1.5;
}

.story-overview-cover-image.is-uploader .uploader-text {
    font-size: 0.9rem;
    font-weight: 500;
}

/* --- NEW: Story Card Background Image Styles --- */

.codex-chapter-card.has-bg-image {
    position: relative;
    overflow: hidden; /* This is crucial to contain the zooming background */
    color: #fff; /* Ensure text is white for better contrast */
}

.card-bg {
    position: absolute;
    top: -10%; /* Start slightly larger to avoid edges showing on zoom */
    left: -10%;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    filter: blur(4px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 0;
}

.codex-chapter-card.has-bg-image:hover .card-bg {
    transform: scale(1.1); /* Zoom-in effect on hover */
}

.card-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 10, 15, 0.6); /* Dark overlay */
    z-index: 1;
}

.card-content {
    position: relative;
    z-index: 2;
    padding: 15px; /* Apply original padding here */
    width: 100%;
    box-sizing: border-box;
}

.codex-chapter-card.has-bg-image .card-title,
.codex-chapter-card.has-bg-image .card-meta {
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Add a subtle shadow to text */
}
/* --- NEW: Story Card Selection Animation (Vignette Glow) --- */

@keyframes vignette-glow {
  0% {
    box-shadow: inset 0 0 15px 5px rgba(74, 144, 226, 0.3);
  }
  50% {
    box-shadow: inset 0 0 25px 10px rgba(74, 144, 226, 0.6);
  }
  100% {
    box-shadow: inset 0 0 15px 5px rgba(74, 144, 226, 0.3);
  }
}

/* Keep the hover effect for non-selected cards */
.codex-chapter-card.has-bg-image:not(.is-selected):hover .card-bg {
    transform: scale(1.1);
}

/* THIS IS THE FIX: Keep the background zoomed when the card is selected */
.codex-chapter-card.is-selected .card-bg {
    transform: scale(1.1);
}

/* Add a pseudo-element to the selected card to create the glow */
.codex-chapter-card.is-selected.has-bg-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 6px; /* Match parent card's border-radius */
    pointer-events: none; /* Make sure it doesn't block clicks */
    animation: vignette-glow 3s infinite ease-in-out;
    z-index: 3; /* Ensure it's on top of the overlay */
}

/* 2. Add these new rules to the end of the file */

/* Allows the Chapters tab to scroll if its content overflows */
.composition-canvas.is-chapters-tab {
    overflow-y: auto;
}

/* Hides the scrollbar completely on the Overview tab */
.composition-canvas.is-overview-tab {
    overflow-y: hidden;
}

/* Reduces the vertical gap in the overview grid to help prevent overflow */

/* --- NEW: Sliding Tab Indicator Animation --- */

/* 1. Make the tab container a positioning context */
.story-tab-nav {
    position: relative;
}

/* 2. Remove the old border-based underline from the buttons */
.story-tab-btn {
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease; /* Keep the color transition */
}

.story-tab-btn.is-active {
    border-bottom-color: transparent; /* Ensure no border is shown */
    color: #fff; /* Make active tab text white for better contrast */
}

/* 3. Style the new sliding indicator element */
.story-tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #4a90e2;
    border-radius: 1px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- REVISED: Story Tab Content Animations (FIX) --- */

@keyframes slideInFromRight {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutToLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-50px); opacity: 0; }
}
@keyframes slideInFromLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutToRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(50px); opacity: 0; }
}

.composition-canvas.has-tabs {
    position: relative;
    overflow: hidden;
}

.story-tab-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none; /* Inactive panels are not clickable */
    /* --- NEW LINES --- */
    padding: 25px;
    box-sizing: border-box;
    overflow-y: auto;
}

.story-tab-content.is-active {
    opacity: 1;
    pointer-events: auto;
    /* position: relative; <-- THIS LINE IS REMOVED */
    z-index: 2;
}

/* Animation trigger classes */
.story-tab-content.slide-in-from-right { 
    animation: slideInFromRight 0.4s ease-out forwards;
    z-index: 3; /* Ensure incoming panel is on top */
}
.story-tab-content.slide-out-to-left { 
    animation: slideOutToLeft 0.4s ease-out forwards;
    z-index: 1;
}
.story-tab-content.slide-in-from-left { 
    animation: slideInFromLeft 0.4s ease-out forwards;
    z-index: 3; /* Ensure incoming panel is on top */
}
.story-tab-content.slide-out-to-right { 
    animation: slideOutToRight 0.4s ease-out forwards;
    z-index: 1;
}

/* --- NEW: "Add Chapter" Card --- */
.chapter-grid-card.is-new-chapter-card {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.3s, border-color 0.3s;
}

.chapter-grid-card.is-new-chapter-card:hover {
    background-color: rgba(74, 144, 226, 0.1);
    border-color: #4a90e2;
}

.is-new-chapter-card .new-chapter-icon {
    font-size: 3rem;
    font-weight: 200;
    color: #8b949e;
    line-height: 1;
    transition: color 0.3s;
}

.is-new-chapter-card:hover .new-chapter-icon {
    color: #fff;
}

.is-new-chapter-card .chapter-card-title {
    position: static; /* Override absolute positioning from default card */
    font-size: 0.9rem;
    text-shadow: none;
    color: #a9b3c1;
    transition: color 0.3s;
}

.is-new-chapter-card:hover .chapter-card-title {
    color: #fff;
}

/* --- NEW: Hide Chapter Header in Grid View --- */
.chapter-list-header.is-grid-view {
    height: 0;
    padding: 0;
    border-bottom: none;
    margin-bottom: 25px; /* Adds space between the tabs and the chapter grid */
}

/* --- NEW: Locked Button State --- */
.action-btn-primary.is-locked {
    background-color: #4a5568; /* Muted gray background */
    cursor: not-allowed;
    opacity: 0.7;
}

.action-btn-primary.is-locked:hover {
    background-color: #4a5568; /* Ensure it doesn't change color on hover */
}

/* Ensure the lock icon is styled correctly inside the button */
.action-btn-primary.is-locked svg {
    width: 16px;
    height: 16px;
    stroke: #c7d2fe; /* A light, muted color for the icon */
}

/* --- FIX: Chapter Details Status Badge Layout --- */
.status-badge-container {
    display: flex;
    gap: 10px;
    align-self: flex-start; /* This is the key change to stop the full-width stretch */
    margin-bottom: 10px;   /* Adds space between the badges and the chapter title below */
}

/* --- NEW: Submission Guide Styles --- */
.legend-section {
    margin-top: 15px;
}

.legend-section h5 {
    font-size: 0.8rem;
    color: #8b949e;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.legend-icon {
    margin-right: 10px;
    flex-shrink: 0;
}

.legend-item .urgent-warning-icon.legend-icon {
    color: #f59e0b; /* Match the icon color from the list */
}

/* --- NEW: Sidebar Accordion Guide --- */
.footer-accordion .legend-title.accordion-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.accordion-toggle .chevron-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease-in-out;
}

.footer-accordion.is-expanded .accordion-toggle .chevron-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.footer-accordion.is-expanded .accordion-content {
    max-height: 300px; /* Animate to this height when expanded */
}

/* --- NEW: Sidebar View Switcher for Submission Guide --- */

/* This new wrapper will contain and manage the two sliding panels */
.sidebar-nav-flipper {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
}

.sidebar-nav,
.submission-guide-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

/* Default state: nav is visible, guide is hidden off-screen to the right */
.sidebar-nav {
    transform: translateX(0);
    opacity: 1;
}

.submission-guide-panel {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

/* Expanded state: guide becomes visible, nav slides off-screen to the left */
#dashboard-sidebar.is-guide-expanded .sidebar-nav {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

#dashboard-sidebar.is-guide-expanded .submission-guide-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Hide the blue active tab indicator when the guide is shown */
#dashboard-sidebar.is-guide-expanded .sidebar-nav::after {
    opacity: 0;
}

/* Styles for the content within the expanded guide panel */
.guide-content-wrapper {
    flex-grow: 1;
    overflow-y: auto; /* Allows the guide to scroll if needed */
}

.back-to-nav-btn {
    background: none;
    border: 1px solid #4a5568;
    color: #a9b3c1;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 20px;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.back-to-nav-btn:hover {
    background-color: #4a5568;
    color: #fff;
}

/* Style the new footer toggle button */
.guide-toggle-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #a9b3c1;
    padding: 10px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.guide-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.guide-toggle-btn .chevron-icon {
    width: 20px;
    height: 20px;
    transform: rotate(-90deg); /* Points right */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#dashboard-sidebar.is-guide-expanded .guide-toggle-btn .chevron-icon {
    transform: rotate(90deg); /* Points left */
}

/* --- NEW: Tier Progression Widget --- */
.tier-progression-widget {
    margin-top: 15px;
}

.tier-progression-widget h5 {
    font-size: 0.8rem;
    color: #8b949e;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tier-progression-widget .progress-item {
    margin-bottom: 15px;
}

.tier-progression-widget .progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.tier-progression-widget .progress-labels label {
    color: #ccc;
}

.tier-progression-widget .progress-labels span {
    color: #8b949e;
    font-weight: bold;
}

.tier-progression-widget .progress-bar {
    width: 100%;
    height: 6px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 3px;
    overflow: hidden;
}

.tier-progression-widget .progress-fill {
    height: 100%;
    background-color: #4a90e2;
    border-radius: 3px;
    width: 0%; /* Start at 0, will be set by JS */
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.tier-progress-complete {
    font-size: 0.9rem;
    color: #a4e48c;
    text-align: center;
    padding: 10px;
    background-color: rgba(103, 194, 58, 0.1);
    border-radius: 4px;
}

/* --- NEW: Hide Submission Guide Scrollbar --- */
.guide-content-wrapper::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, Opera */
}
.guide-content-wrapper {
    -ms-overflow-style: none;  /* For IE and Edge */
    scrollbar-width: none;  /* For Firefox */
}

/* --- FIX: Sidebar Footer Animation & Button Consistency --- */

/* 1. Fix the distracting up/down animation when switching tabs */
.footer-action {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    display: none; /* Hide element completely to prevent layout shifts */
    max-height: none; /* Remove the old animation property */
}

.footer-action.is-visible {
    opacity: 1;
    display: block; /* Show the correct footer content */
}

/* 2. Restyle the 'Submission Guide' button to be consistent */
.guide-toggle-btn {
    /* Styles from .codex-create-btn for consistency */
    width: 100%;
    padding: 12px;
    background-color: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    
    /* Styles kept from original for functionality */
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.guide-toggle-btn:hover {
    background-color: #5aa1f2;
}

/* 3. Update the chevron icon to be an up/down indicator */
.guide-toggle-btn .chevron-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform: rotate(0deg); /* Default state: chevron points down */
}

#dashboard-sidebar.is-guide-expanded .guide-toggle-btn .chevron-icon {
    transform: rotate(180deg); /* Expanded state: chevron points up */
}

/* 4. Remove the old accordion styling that is no longer needed */
.footer-accordion .accordion-content,
.footer-accordion.is-expanded .accordion-content {
    max-height: none;
}
/* --- NEW: Submission Overview Widget (Compact Layout) --- */
.submission-overview-widget {
    margin-top: 0; /* Removed top margin */
}

.submission-overview-widget h5 {
    font-size: 0.8rem;
    color: #8b949e;
    text-transform: uppercase;
    margin: 0 0 5px 0; /* Reduced bottom margin */
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.overview-item {
    display: flex;
    align-items: center;
    padding: 8px 5px; /* Reduced vertical padding */
    border-radius: 4px;
    margin-bottom: 0; /* Removed bottom margin */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.overview-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.overview-icon {
    margin-right: 12px;
    font-size: 1.2rem;
    line-height: 1;
}

.overview-label {
    flex-grow: 1;
    font-size: 0.9rem;
    color: #d1d5db;
}

.overview-count {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.overview-count.is-action {
    background-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.overview-count.is-review {
    background-color: rgba(74, 144, 226, 0.2);
    color: #a9cfff;
}

.overview-count.is-approved {
    background-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

/* --- NEW: Expanded Submission Overview Widget --- */
.overview-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 10px 5px;
}

.overview-icon svg {
    width: 18px;
    height: 18px;
    fill: #8b949e;
    transition: fill 0.2s ease;
}

.overview-item:hover .overview-icon svg {
    fill: #fff;
}

.overview-count.is-neutral {
    background-color: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

/* Styles for Creator Dashboard Uploads Tab */

.story-uploads-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.upload-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 20px;
}

.upload-section h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #e0e0e0;
}

.upload-preview-area {
    width: 100%;
    aspect-ratio: 16 / 9; /* Maintain banner aspect ratio */
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    overflow: hidden; /* Ensure image fits */
}

.upload-preview-area.is-placeholder span {
    color: #888;
    font-style: italic;
}

.upload-preview-area img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Show the whole image, don't crop */
    border-radius: 3px;
}

.upload-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.upload-helper-text {
    font-size: 0.8rem;
    color: #8b949e; /* Muted text color */
    margin: 0;
}

.upload-section-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 10px 0;
}

/* Re-use existing button styles if possible */
.action-btn-secondary {
    /* ... your existing styles ... */
    padding: 8px 15px;
}

.action-btn-danger {
    /* ... your existing styles ... */
    padding: 8px 15px;
    background-color: #ef4444; /* Example danger color */
    border-color: #ef4444;
}
.action-btn-danger:hover {
    background-color: #dc2626;
    border-color: #dc2626;
}

/* Add to creator-dashboard-styles.css */

.story-details-tab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Responsive columns */
    gap: 40px;
    padding: 20px 0;
}

.details-form-section h3,
.details-uploads-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.details-form-section .metadata-field {
    margin-bottom: 20px;
}

.details-form-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #a9b3c1;
}

.details-form-section input[type="text"],
.details-form-section textarea {
    width: 100%;
    padding: 10px 12px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    font-size: 0.9rem;
}
 .details-form-section textarea {
     resize: vertical;
     min-height: 80px;
 }

.details-form-section .field-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

.details-form-section .helper-text {
    font-size: 0.8rem;
    color: #8b949e;
}

.details-form-section .char-counter {
    font-size: 0.8rem;
    color: #8b949e;
}
 .details-form-section .char-counter.is-limit {
    color: #fca5a5; /* Red when limit reached */
    font-weight: bold;
}

.details-uploads-section .story-uploads-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Existing .upload-section styles should work, ensure they exist */
.upload-section h4 {
    margin-bottom: 15px;
    font-size: 1rem;
    color: #ccc;
}
 .upload-preview-area {
     aspect-ratio: 16 / 9;
     background-color: rgba(0,0,0,0.3);
     border: 1px dashed rgba(255,255,255,0.2);
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 15px;
     overflow: hidden;
 }
 .upload-preview-area img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
  .upload-preview-area span {
     color: #8b949e;
     font-style: italic;
 }
 .upload-controls {
     display: flex;
     gap: 10px;
     margin-bottom: 8px;
 }
 .upload-helper-text {
     font-size: 0.8rem;
     color: #8b949e;
     margin: 0;
 }
 .upload-section-divider {
     height: 1px;
     background-color: rgba(255, 255, 255, 0.1);
     margin: 10px 0;
 }
 
 /* --- NEW: Story Logo Uploader Styles --- */
.upload-preview-area.logo-preview {
    aspect-ratio: auto; /* Allow flexible aspect ratio for logos */
    height: 120px; /* Set a fixed height for the preview area */
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.05); /* Light background to see transparency */
}

.upload-preview-area.logo-preview img {
    object-fit: contain; /* Ensure logo fits without stretching */
    max-width: 100%;
    max-height: 100%;
}

.upload-preview-area.logo-preview.is-placeholder span {
    color: #888;
    font-style: italic;
    font-size: 0.9rem;
}

/* Logo positioned absolutely top-right within the composition panel */
.composition-story-logo.is-absolute-top-right {
    position: absolute;
    top: 11px; /* Keep vertical position */
    right: 25px;
    max-height: 80px; /* <--- MODIFIED: Reverted to original size */
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 10;
}

/* --- NEW: L-Shaped Header Divider for Logo Overlap (Corrected Version 8 - Closer Spacing) --- */

/* Target the header *only* when the logo is present */


/* Ensure logo stays on top */
.composition-story-logo.is-absolute-top-right {
    z-index: 2; /* Make sure logo is above the pseudo-element lines */
}

/* Ensure the tab nav content is visually above the lines */
.story-tab-nav {
    position: relative;
    z-index: 1; /* Ensures buttons and indicator are above the line */
}

/* Create the horizontal part of the L-shaped divider */
.composition-header::before {
    content: '';
    position: absolute;
    bottom: 0; /* Aligns to the bottom of the header */
    left: 0; /* <--- MODIFIED: Make the line reach the left end */
    right: 130px; /* Stops before the logo area */
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1); /* Divider color */
    z-index: 1; /* Ensure it's behind the vertical line if overlapping */
}

/* Create the vertical part of the L-shaped divider */
.composition-header::after {
    content: '';
    position: absolute;
    right: 130px; /* Aligns with the end of the horizontal line */
    top: 100%; /* Starts exactly at the bottom edge of the header */
    height: 46px; /* Extend down by the approximate height of the tab bar. Adjust as needed. */
    width: 1px; /* Vertical line width */
    background-color: rgba(255, 255, 255, 0.1); /* Divider color */
    z-index: 1; /* Keep it behind the logo */
}

/* --- Genre Tag Input Styles --- */
.tag-input-container {
    position: relative; /* Needed for absolute positioning of suggestions */
}

.selected-tags-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    margin-bottom: 5px; /* Space between pills and input */
    min-height: 40px; /* Ensure it has some height even when empty */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(0,0,0,0.1);
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    background-color: #4a90e2; /* Blue */
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px; /* Rounded pill shape */
    font-size: 0.85rem;
    font-weight: 500;
}

.remove-tag-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    line-height: 1;
    margin-left: 6px;
    padding: 0 2px;
    cursor: pointer;
    transition: color 0.2s;
}

.remove-tag-btn:hover {
    color: #fff;
}

#genre-input, #genre-input-details {
    width: 100%;
    margin-top: 5px; /* Ensure input doesn't overlap tags */
}

.genre-suggestions {
    position: absolute;
    top: 100%; /* Position below the input */
    left: 0;
    right: 0;
    background: #1a1c29; /* Dark background */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    display: none; /* Hidden by default */
}

.genre-suggestions li {
    padding: 10px 15px;
    cursor: pointer;
    color: #ccc;
    transition: background-color 0.2s, color 0.2s;
}

.genre-suggestions li:hover {
    background-color: #4a90e2;
    color: #fff;
}

/* --- FIX: Compact Chapter Header Buttons --- */
.chapter-list-header .header-action-buttons .action-btn-primary,
.chapter-list-header .header-action-buttons .action-btn-secondary,
.chapter-list-header .header-action-buttons .action-btn-danger {
    padding: 8px 12px;
    font-size: 0.85rem;
    gap: 6px; /* Tighter gap between icon and text */
}

/* Fix for icon-only buttons (like delete/unschedule) */
.chapter-list-header .header-action-buttons .action-btn-danger {
    /* Make the button squarer if it only has an icon */
    min-width: 34px; 
    padding: 8px;
}

/* Make text buttons with icons look right */
.chapter-list-header .header-action-buttons .action-btn-primary,
.chapter-list-header .header-action-buttons .action-btn-secondary {
    padding: 8px 12px;
}

/* Standardize icon size inside these smaller buttons */
.chapter-list-header .header-action-buttons .action-btn-primary svg,
.chapter-list-header .header-action-buttons .action-btn-secondary svg,
.chapter-list-header .header-action-buttons .action-btn-danger svg {
    width: 14px;
    height: 14px;
}

/* --- NEW: Admin Reviewed Icon (Improved SVG Checkmark) --- */
.chapter-title-icon.admin-reviewed-icon {
    display: inline-block;
    width: 22px;  /* Size of the green circle */
    height: 22px; /* Size of the green circle */
    border-radius: 50%;
    background-color: #22c55e; /* Green background */
    
    /* Spacing and alignment */
    margin-left: 10px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    flex-shrink: 0;

    /* This will be the white checkmark */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.5 4.5L6.5 11.5L2.5 7.5' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-size: 12px 12px; /* Size of the checkmark */
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: white; /* Color of the checkmark */
}

/* This pseudo-element is now just the inner white circle */
.chapter-title-icon.admin-reviewed-icon::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    
    /* Creates the white inner circle effect */
    border: 2px solid white;
    border-radius: 50%;
    box-sizing: border-box; /* Ensures border is inside */
}

/* --- NEW: Admin Pending Icon (Grey Clock/Circle) --- */
.chapter-title-icon.admin-pending-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #4a5568; /* Muted grey-blue background */
    
    margin-left: 10px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    flex-shrink: 0;

    /* Use a clock or hourglass icon for pending state */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    mask-size: 14px 14px;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: #9ca3af; /* Light grey icon color */
}

/* Optional: Add a subtle pulse to the pending icon */
.chapter-title-icon.admin-pending-icon {
    animation: pulse-grey 3s infinite ease-in-out;
}

@keyframes pulse-grey {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* --- IMPROVEMENT: Fading Lock on Dashboard Chapter Details --- */
.chapter-details-container {
    position: relative;
}

.chapter-details-container::before {
    content: 'This chapter is currently under review by an admin and cannot be edited.';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(9, 10, 15, 0.7);
    backdrop-filter: blur(2px);
    z-index: 2;
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.action-btn-primary.is-locked + .chapter-details-container::before {
    opacity: 1;
    pointer-events: all;
}


/* --- NEW: Panel Content Sliding Animations (Pane 2) --- */
@keyframes codex-slide-out-up {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-20px); opacity: 0; }
}
@keyframes codex-slide-in-from-bottom {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes codex-slide-out-down {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(20px); opacity: 0; }
}
@keyframes codex-slide-in-from-top {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.codex-panel-content-wrapper {
    /* This wrapper will hold the header and list */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.codex-sliding-out-up {
    animation: codex-slide-out-up 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.codex-sliding-in-from-bottom {
    animation: codex-slide-in-from-bottom 0.35s cubic-bezier(0, 0, 0.2, 1) forwards;
}
.codex-sliding-out-down {
    animation: codex-slide-out-down 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.codex-sliding-in-from-top {
    animation: codex-slide-in-from-top 0.35s cubic-bezier(0, 0, 0.2, 1) forwards;
}

/* --- NEW: Panel 3 Animation Wrapper --- */

/*
 * This new class ensures the third panel's content wrapper
 * has the same properties as the second panel's wrapper.
*/
.composition-panel-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* * This new helper class is added to the main composition panel
 * *during* the animation to prevent the sliding content
 * from appearing outside the panel's borders.
*/
#dashboard-composition-panel.is-transitioning-child {
    overflow: hidden;
}