:root {
    --creative-row-text-offset: 1.8em;
    --creative-loading-emojis: "🚀,🧠,🧩,🤝,🗂️,⚡";

    /* Icon size used for vertical centering calc */
    --creative-icon-size: 16px;

    /* Creative tree heading styles — defaults match pre-#799 behavior.
       Themes that don't define these variables render identically to before. */
    --creative-h1-size: 1.3em;
    --creative-h2-size: 1.2em;
    --creative-h3-size: 1.1em;
    /* Line heights for headings (used by calc-based vertical centering) */
    --creative-h1-lh: 1.3;
    --creative-h2-lh: 1.3;
    --creative-h3-lh: 1.3;
    --creative-body-lh: 1.5;
    --creative-h1-weight: bold;
    --creative-h2-weight: bold;
    --creative-h3-weight: bold;
    --creative-h1-color: inherit;
    --creative-h2-color: inherit;
    --creative-h3-color: inherit;
    --creative-h1-bg: transparent;
    --creative-h2-bg: transparent;
    --creative-h3-bg: transparent;

    /* Childless heading style (level 1-3 without children) */
    --creative-childless-size: 1em;
    --creative-childless-weight: 400;

    /* Bullet style */
    --creative-bullet-size: 5px;
    /* --creative-bullet-color: NOT set here; inline fallback (currentColor) used.
       Setting it at :root would freeze the value to :root scope,
       ignoring dark-mode overrides on body. */

    /* Tree line style — only size/opacity have safe defaults.
       --creative-tree-line-color: NOT set here; inline fallback var(--border-color) used.
       This ensures dark mode's --border-color override on body is respected. */
    --creative-tree-line-opacity: 0.5;
}

.creative-actions-row,
.page-title {
    visibility: hidden;
}

html.creative-alignment-ready .creative-actions-row,
html.creative-alignment-ready .page-title {
    visibility: visible;
}

.creative-actions-row {
    margin: 0 0 0 var(--creative-row-text-offset);
    padding: var(--space-1) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 36px;
    border: none;
}

/* === Breadcrumb (left-aligned) === */
.creative-breadcrumb {
    display: flex;
    align-items: center;
    font-size: var(--text-0);
    color: var(--text-muted);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    min-width: 0;
    margin-right: var(--space-3);
}

.creative-breadcrumb::-webkit-scrollbar {
    display: none;
}

/* Override application.css .creative-actions-row a for breadcrumb links */
.creative-actions-row a.creative-breadcrumb-link {
    color: var(--text-muted) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--text-muted) 40%, transparent);
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: var(--text-0) !important;
    filter: none !important;
    line-height: normal;
}

.creative-actions-row a.creative-breadcrumb-link:hover {
    color: var(--text-primary) !important;
    text-decoration-color: var(--text-primary) !important;
}

.creative-actions-row a.creative-breadcrumb-current {
    color: var(--text-secondary) !important;
    font-weight: var(--weight-5);
}

.creative-breadcrumb-sep {
    color: var(--text-muted);
    opacity: 0.4;
    margin: 0 var(--space-1);
    font-size: var(--text-00);
    user-select: none;
}

/* === Header actions (right-aligned) === */
.creative-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* Outline button — GNB-like with border.
   Higher specificity to override application.css .creative-actions-row button */
.creative-actions-row .creative-header-actions .creative-header-outline-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    height: 30px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-0);
    transition: background 0.15s var(--ease-out-2), color 0.15s var(--ease-out-2), border-color 0.15s var(--ease-out-2);
}

.creative-actions-row .creative-header-actions .creative-header-outline-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* === Overflow popup menu — GNB style === */
/* #creative-overflow-menu inherits base styles from .popup-menu in popup.css */
#creative-overflow-menu {
    min-width: 200px;
}

/* popup-menu-item base styles are now in popup.css */

#creative-overflow-menu .popup-menu-item.active {
    background: color-mix(in srgb, var(--color-active) 15%, transparent);
    color: var(--color-active);
}

.creative-overflow-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--space-1) 0;
}

.delete-options {
    display: none;
    position: absolute;
    z-index: 10;
    background: var(--surface-section);
    border: 1px solid var(--border-color);
    padding: 0.5em;
    box-shadow: var(--shadow-3);
    border-radius: var(--radius-2);
    min-width: 220px;
}

.delete-one {
    margin-bottom: 0.5em;
}

.tags {
    margin: 0.2em 2.0em;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.creative-tree {
    position: relative;
}

creative-tree-row.show-edit .creative-row {
    display: none !important;
}

.creative-tree.child-drop-indicator-active::after {
    content: '↳';
    position: absolute;
    top: 50%;
    margin-left: 12px;
    color: var(--color-active);
    font-size: 1.3em;
    transform: translateY(-50%);
    pointer-events: none;
}


.creative-link-drop-indicator {
    position: fixed;
    display: none;
    pointer-events: none;
    background: color-mix(in srgb, var(--color-active) 90%, transparent);
    color: var(--text-on-badge);
    font-size: var(--text-0);
    padding: 2px 8px;
    border-radius: var(--radius-2);
    transform: translate(-50%, -170%);
    z-index: 9999;
    font-weight: var(--weight-6);
    letter-spacing: 1px;
}

.creative-tree-li {
    display: flex;
    align-items: flex-start;
    position: relative;
}

/* Tree Lines */
.tree-line {
    width: 10px;
    /* Indentation width matching toggle button */
    min-width: 10px;
    display: flex;
    justify-content: center;
    position: relative;
    align-self: stretch;
    /* Stretch to full height of the row */
}

.tree-line::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: var(--creative-tree-line-color, var(--border-color));
    opacity: var(--creative-tree-line-opacity, 0.5);
}

.creative-content {
    min-width: min(50vw, var(--max-width) / 2);
    max-width: calc(min(100vw, var(--max-width)) - 160px);
    padding-top: 2px;
    /* Slight adjustment for text baseline */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Allow attachments, images, and videos to be interactive independently of the
   parent link. Without pointer-events on the video, the clickable creative row
   would swallow clicks on the native playback controls (play/pause/fullscreen). */
.creative-content a[download],
.creative-content img,
.creative-content video {
    pointer-events: auto;
    position: relative;
    z-index: var(--layer-1);
}

.creative-content video {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-2);
}

.creative-row:hover .creative-content {
    cursor: pointer;
}

@media (max-width: 768px) {
    .creative-content {
        min-width: min(50vw, var(--max-width) / 2);
        max-width: calc(min(100vw, var(--max-width)) - 110px);
    }
}

/* make it as same as <li> tag */
.creative-tree-bullet {
    width: var(--creative-bullet-size, 5px);
    height: var(--creative-bullet-size, 5px);
    min-width: var(--creative-bullet-size, 5px);
    min-height: var(--creative-bullet-size, 5px);
    max-width: var(--creative-bullet-size, 5px);
    max-height: var(--creative-bullet-size, 5px);
    border-radius: 50%;
    background: var(--creative-bullet-color, currentColor);
    margin-left: 4px;
    margin-right: 8px;
    flex: 0 0 var(--creative-bullet-size, 5px);
    margin-top: calc((1em * var(--creative-body-lh, 1.5) - var(--creative-bullet-size, 5px)) / 2);
}

.creative-row-end {
    margin-left: 10px;
    color: var(--text-muted);
    font-size: 0.9em;
    white-space: nowrap;
    display: flex;
    align-items: flex-start;
}

/* Reset row-start vertical centering for buttons inside row-end.
   Uses .creative-row to boost specificity above .level-N rules. */
.creative-row .creative-row-end .creative-action-btn,
.creative-row .creative-row-end .comments-btn {
    margin-top: 0;
}

.creative-tags {
    margin-left: 10px;
    text-align: right;
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
}

.creative-progress-complete,
.creative-progress-incomplete {
    color: var(--color-brand);
}

.creative-progress-incomplete {
    color: var(--text-muted);
}

/* Leaf creatives with binary progress are directly actionable. The checkbox and
   the completion mark share one grid cell so the control keeps a single width
   whichever state is showing. */
.progress-toggle-wrap {
    cursor: pointer;
    display: inline-grid;
    grid-template-areas: "progress-state";
    align-items: center;
    justify-items: center;
    min-width: 1.5em;
    padding-top: 4px;
}

.progress-toggle-wrap > * {
    grid-area: progress-state;
}

.progress-toggle-checkbox {
    width: 1em;
    height: 1em;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-brand);
    transition: opacity 0.12s ease;
}

/* A completed leaf shows the admin completion mark (blank by default) instead of
   a checked box, so finished rows read as quietly as completed parent rows. */
.progress-toggle-mark {
    color: var(--color-brand);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.progress-toggle-wrap[data-current-progress="1"] .progress-toggle-checkbox {
    opacity: 0;
}

.progress-toggle-wrap[data-current-progress="1"] .progress-toggle-mark {
    opacity: 1;
}

/* Hover or keyboard focus brings the checked box back, so an accidental
   completion is undone in place instead of through the inline editor. */
.progress-toggle-wrap[data-current-progress="1"]:hover .progress-toggle-checkbox,
.progress-toggle-wrap[data-current-progress="1"]:focus-within .progress-toggle-checkbox {
    opacity: 1;
}

.progress-toggle-wrap[data-current-progress="1"]:hover .progress-toggle-mark,
.progress-toggle-wrap[data-current-progress="1"]:focus-within .progress-toggle-mark {
    opacity: 0;
}

/* Pointer devices keep a resting row quiet: the checkbox joins the row's other
   hover-revealed actions (edit, comments) instead of standing in every row, and
   keyboard focus reveals it for pointerless navigation. Touch devices have no
   hover to reveal it, so there the checkbox stays visible. The wrap keeps its
   width either way, so revealing the box never shifts the row. */
@media (hover: hover) {
    .creative-row .progress-toggle-checkbox {
        opacity: 0;
    }

    .creative-row:hover .progress-toggle-checkbox,
    .creative-row .progress-toggle-wrap:focus-within .progress-toggle-checkbox {
        opacity: 1;
    }

    .creative-row:hover .progress-toggle-wrap[data-current-progress="1"] .progress-toggle-mark,
    .creative-row .progress-toggle-wrap[data-current-progress="1"]:focus-within .progress-toggle-mark {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .progress-toggle-checkbox,
    .progress-toggle-mark {
        transition: none;
    }
}

.progress-toggle-saving {
    opacity: 0.5;
    pointer-events: none;
}

.creative-row-start {
    display: flex;
    align-items: flex-start;
    flex-grow: 1;
}

.creative-loading-indicator {
    display: inline-flex;
    align-items: baseline;
    margin-left: 0.5em;
    color: var(--text-muted);
    min-width: 1.5em;
}

.creative-loading-dot {
    font-weight: var(--weight-7);
    display: inline-block;
    width: 1.05em;
    text-align: center;
    font-size: 0.55em;
}

.creative-tree-loading-placeholder {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.2em;
    letter-spacing: 2px;

    /*
     * Hold the dots back for the first ~180ms. Most tree fetches resolve well
     * inside that window, and an indicator that appears and vanishes again is
     * itself the flicker we are trying to remove; a slow fetch still gets
     * feedback.
     *
     * Deliberately animated *up* from transparent rather than declaring
     * `opacity: 0` on the element: where animations are suppressed
     * (reduced-motion overrides, headless test harnesses) the placeholder falls
     * back to fully visible instead of disappearing altogether.
     */
    animation: creative-tree-loading-fade-in 300ms ease-out;
}

@keyframes creative-tree-loading-fade-in {
    0%,
    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.creative-tree-loading-placeholder .creative-loading-indicator {
    margin-left: 0;
    font-size: 1.5em;
}

.creative-action-btn {
    margin-left: 0px;
    font-size: var(--text-1);
    cursor: pointer;
    background: none;
    border: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    display: inline-flex;
    flex-shrink: 0;
    /* Default vertical centering for body-text rows (level 4+) */
    margin-top: calc((1em * var(--creative-body-lh, 1.5) - var(--creative-icon-size, 16px)) / 2);
}

/* Ensure inline editor actions use the correct text color */
#actions-inline-editor .creative-action-btn {
    color: var(--text-primary);
}

.creative-action-btn:disabled,
.popup-menu-toggle:disabled,
.popup-menu .popup-menu-item:disabled {
    opacity: 0.4;
    color: var(--text-muted);
    cursor: not-allowed;
    filter: grayscale(100%);
}

.creative-action-btn:disabled .icon-svg,
.popup-menu-toggle:disabled .icon-svg,
.popup-menu .popup-menu-item:disabled .icon-svg {
    opacity: 0.75;
}

.popup-menu-toggle:disabled {
    pointer-events: none;
}

#voice-comments-btn.voice-input-active {
    background-color: var(--color-brand);
    color: var(--surface-bg);
    border-radius: var(--radius-2);
    padding: 4px 8px;
}

.creative-toggle-btn {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    margin-top: calc((1em * var(--creative-body-lh, 1.5) - var(--creative-icon-size, 16px)) / 2);
    visibility: hidden;
    /* Hidden by default on desktop */
    /* Total width is 20px (16 + 4) */
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.creative-row:hover .creative-toggle-btn {
    visibility: visible;
}

creative-tree-row:not([expanded]) .creative-toggle-btn {
    visibility: visible;
}


.add-creative-btn {
    font-size: 18px;
    font-weight: var(--weight-7);
    text-decoration: none;
}


/* Replaced creative-row-actions visibility logic with direct targeting */
.edit-inline-btn {
    visibility: hidden;
    opacity: 0;
    color: var(--text-primary);
    transition: opacity 0.2s ease;
    width: 20px;
    /* Fixed width for alignment */
}

.creative-row:hover .edit-inline-btn {
    color: var(--text-primary);
    visibility: visible;
    opacity: 1;
}

@media (max-width: 768px) {
    .creative-toggle-btn {
        visibility: visible !important;
    }

    .edit-inline-btn {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateX(10px);
        transition: max-width 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    }

    .creative-row.show-edit .edit-inline-btn {
        max-width: 40px;
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        visibility: visible;
    }
}

.creative-divider {
    position: relative;
    /* width: 6px; */
    margin-right: 2px;
    background-color: var(--border-color);
    display: flex;
    align-items: center;
    align-self: stretch;
}

/* to prevent border height from affecting layout, add virtual border */
@media (max-width: 768px) {

    .creative-divider::before,
    .creative-divider::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 6px;
        /* border thickness */
        background: var(--surface-bg);
    }

    .creative-divider::before {
        top: 0;
    }

    .creative-divider::after {
        bottom: 0;
    }
}

.select-creative-checkbox {
    margin-left: 6px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    visibility: visible;
    margin-top: calc((1em * var(--creative-body-lh, 1.5) - var(--creative-icon-size, 16px)) / 2);
}

.creative-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2px 0;
}

.creative-row.selected {
    background-color: var(--border-drag-over);
}

creative-tree-row.chat-active .creative-row {
    border: var(--border-1) solid var(--color-active);
    border-radius: var(--radius-2);
    box-shadow: 0 0 6px color-mix(in srgb, var(--color-active) 25%, transparent),
                0 0 14px color-mix(in srgb, var(--color-active) 12%, transparent);
}

.creative-row:hover,
.creative-row.level-1:hover,
.creative-row.level-2:hover,
.creative-row.level-3:hover {
    background-color: var(--surface-hover);
}

.creative-progress {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-left: 10px;
    margin-top: calc((1em * var(--creative-body-lh, 1.5) - 1em) / 2);
}

.page-title {
    margin-left: var(--creative-row-text-offset);
    font-size: 1.4em;
}

/* ── Title text: larger than default h1 ── */
.creative-tree-title .page-title {
    font-size: var(--text-5, 2rem);
}


/* Constrain images within creative-row to prevent overflow */
.creative-row img {
    max-width: 100%;
    height: auto;
    display: block;
}

.creative-origin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: var(--radius-round);
    transition: background-color 0.2s ease;
}

.creative-origin-link:hover,
.creative-origin-link:focus {
    background-color: var(--surface-hover);
}

.creative-origin-link-icon {
    width: 16px;
    height: 16px;
}

.creative-row-start h1 {
    font-size: var(--creative-h1-size, 1.3em);
    font-weight: var(--creative-h1-weight, bold);
    color: var(--creative-h1-color, inherit);
    line-height: var(--creative-h1-lh, 1.3);
    margin: 0;
}

.creative-row-start h2 {
    font-size: var(--creative-h2-size, 1.2em);
    font-weight: var(--creative-h2-weight, bold);
    color: var(--creative-h2-color, inherit);
    line-height: var(--creative-h2-lh, 1.3);
    margin: 0;
}

.creative-row-start h3 {
    font-size: var(--creative-h3-size, 1.1em);
    font-weight: var(--creative-h3-weight, bold);
    color: var(--creative-h3-color, inherit);
    line-height: var(--creative-h3-lh, 1.3);
    margin: 0;
}

.creative-row-start h4,
.creative-row-start h5,
.creative-row-start h6 {
    margin: 0;
}

/* Childless items (level 1-3 without children) rendered as plain text */
.creative-childless .creative-content {
    font-size: var(--creative-childless-size, 1em);
    font-weight: var(--creative-childless-weight, 400);
}

/* Dynamic vertical centering: calc((font-size × line-height − icon-size) / 2)
   Scoped to .creative-row-start to avoid affecting .creative-row-end buttons. */
.level-1 .creative-row-start > .creative-action-btn,
.level-1 .select-creative-checkbox,
.level-1 .creative-toggle-btn {
    margin-top: calc((var(--creative-h1-size, 1.3em) * var(--creative-h1-lh, 1.3) - var(--creative-icon-size, 16px)) / 2);
}

.level-2 .creative-row-start > .creative-action-btn,
.level-2 .select-creative-checkbox,
.level-2 .creative-toggle-btn {
    margin-top: calc((var(--creative-h2-size, 1.2em) * var(--creative-h2-lh, 1.3) - var(--creative-icon-size, 16px)) / 2);
}

.level-3 .creative-row-start > .creative-action-btn,
.level-3 .select-creative-checkbox,
.level-3 .creative-toggle-btn {
    margin-top: calc((var(--creative-h3-size, 1.1em) * var(--creative-h3-lh, 1.3) - var(--creative-icon-size, 16px)) / 2);
}

/* Childless items (level 1-3 without children) use body font size.
   Scoped to .creative-row-start to avoid affecting .creative-row-end buttons. */
.level-1:has(.creative-childless) .creative-row-start > .creative-action-btn,
.level-2:has(.creative-childless) .creative-row-start > .creative-action-btn,
.level-3:has(.creative-childless) .creative-row-start > .creative-action-btn,
.level-1:has(.creative-childless) .creative-toggle-btn,
.level-2:has(.creative-childless) .creative-toggle-btn,
.level-3:has(.creative-childless) .creative-toggle-btn,
.level-1:has(.creative-childless) .select-creative-checkbox,
.level-2:has(.creative-childless) .select-creative-checkbox,
.level-3:has(.creative-childless) .select-creative-checkbox {
    margin-top: calc((1em * var(--creative-body-lh, 1.5) - var(--creative-icon-size, 16px)) / 2);
}


.indent1,
.indent2,
.indent3 {
    display: flex;
    align-items: flex-start;
    margin-left: 0;
}

.comments-btn {
    width: 28px;
    height: 28px;
    position: relative;
    color: var(--text-primary);
}

/* Add spacing for headings via row padding to preserve alignment */
.creative-row.level-1 {
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: var(--creative-h1-bg, transparent);
}

.creative-row.level-2 {
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: var(--creative-h2-bg, transparent);
}

.creative-row.level-3 {
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: var(--creative-h3-bg, transparent);
}

.comment-icon {
    width: 100%;
    height: 100%;
    color: var(--text-primary);
}

.comments-btn.no-comments {
    visibility: hidden;
}

.creative-row:hover .comments-btn.no-comments {
    visibility: visible;
    opacity: 1.0;
}

@media (max-width: 768px) {
    .comments-btn.no-comments {
        visibility: visible;
        opacity: 0.2;
    }
}

.comments-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
}

.comments-btn .badge[data-count="0"] {
    background: var(--color-brand);
}

/* Metadata popup styles — mirrors #comments-popup positioning */
.metadata-popup {
    position: absolute;
    right: 2em;
    z-index: var(--layer-modal);
    width: 400px;
    max-width: calc(100vw - 1em);
    max-height: 60vh;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-3);
    padding: var(--space-3);
    box-shadow: var(--shadow-3);
    display: flex;
    flex-direction: column;
}

.metadata-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    font-weight: var(--weight-6);
    color: var(--text-primary);
}

.metadata-popup-header button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--text-3);
    color: var(--text-muted);
    padding: 0;
    line-height: 1;
}

.metadata-popup-header button:hover {
    color: var(--text-primary);
}

#metadata-yaml-editor {
    flex: 1;
    width: 100%;
    min-height: 200px;
    box-sizing: border-box;
    font-family: var(--font-mono);
    font-size: var(--text-0);
    line-height: var(--leading-2);
    padding: var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2);
    background: var(--surface-input);
    color: var(--text-primary);
    resize: vertical;
}

#metadata-save-btn {
    margin-top: var(--space-2);
    align-self: flex-end;
}

@media (max-width: 768px) {
    .metadata-popup {
        right: 0.5em;
        left: 0.5em;
        width: auto;
    }
}
/* Archive toggle button */
.archive-toggle-btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.archive-toggle-btn:hover {
    background: var(--surface-input);
    color: var(--text-primary);
}
.archive-toggle-btn.active {
    background: var(--color-active);
    color: var(--color-badge-text);
    border-color: var(--color-active);
}

/* Archived creative row */
creative-tree-row[archived] .creative-tree {
    opacity: 0.5;
}
creative-tree-row[archived] .creative-row {
    background-color: var(--surface-input);
}

/* Import dropzone drag-over feedback */
#import-markdown-dropzone.dragover {
    border-color: var(--color-accent-border);
    background-color: var(--surface-input);
}

/* --- Creative Presence Avatars --- */
.creative-presence-avatars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: var(--space-2, 8px);
    vertical-align: middle;
}

.creative-presence-user {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.creative-presence-user .avatar {
    border: 2px solid var(--color-active, #4caf50);
    width: 20px;
    height: 20px;
}

/* --- Editing Conflict Indicator --- */
creative-tree-row.is-being-edited {
    position: relative;
}

creative-tree-row.is-being-edited .creative-tree {
    border-left: 3px solid var(--color-warning, #ff9800);
}

.creative-editing-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-warning, #ff9800);
    margin-left: var(--space-2, 8px);
    white-space: nowrap;
    animation: editing-pulse 1.5s ease-in-out infinite;
}

@keyframes editing-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Editing presence avatars */
.creative-editing-avatars {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 2px);
    margin-left: var(--space-1, 4px);
}

.creative-editing-avatar-img {
    border-radius: var(--radius-round, 50%);
    border: 2px solid var(--color-accent, #4a9eff);
    object-fit: cover;
}

.creative-editing-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-round, 50%);
    background: var(--color-accent, #4a9eff);
    color: var(--color-on-accent, white);
    font-size: var(--text-xs, 11px);
    font-weight: var(--weight-semibold, 600);
    border: 2px solid var(--color-accent, #4a9eff);
}

/* Wrapper for progressHtml so DOM can be synced back to Lit state
   after Turbo Streams mutations (e.g. badge count updates).
   display:contents ensures no layout impact. */
.creative-progress-area {
    display: contents;
}

/* ─── Bundle drag image (shared by creatives + comments) ─── */

.drag-bundle-image {
    position: fixed;
    top: -1000px;
    left: -1000px;
    width: 220px;
    pointer-events: none;
}

.drag-bundle-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 42px;
    border-radius: var(--radius-2);
    border: var(--border-1) solid var(--border-muted);
    background-color: var(--surface-base);
    box-shadow: var(--shadow-2);
}

.drag-bundle-card--back {
    transform: translate(6px, -6px) rotate(2deg);
    opacity: 0.5;
}

.drag-bundle-card--mid {
    transform: translate(3px, -3px) rotate(1deg);
    opacity: 0.75;
}

.drag-bundle-card--front {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    font-size: var(--text-1);
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: var(--surface-base);
}

.drag-bundle-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-round);
    background-color: var(--color-active);
    color: var(--color-badge-text);
    font-size: var(--text-0);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-2);
}

/* ============================================================================
 * Creative tree — actionable empty state
 * engines/collavre/app/views/collavre/creatives/_empty_state.html.erb
 * Uses semantic tokens only, so dark mode (body.dark-mode) is automatic.
 * ============================================================================ */
.creative-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-7) var(--space-3) var(--space-8);
}

.creative-empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-round);
    background: var(--surface-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
    color: var(--text-muted);
}

.creative-empty-state-icon svg {
    width: 28px;
    height: 28px;
}

.creative-empty-state-heading {
    font-size: var(--text-3);
    font-weight: var(--weight-6);
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
}

/* --- Concept card: "what's a creative?" --- */
.creative-empty-state-concept {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border: 1px solid var(--border-color);
    background: var(--surface-bg);
    border-radius: 8px;
    max-width: 560px;
    width: 100%;
}

.creative-empty-state-concept-title {
    font-size: var(--text-1);
    font-weight: var(--weight-6);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.creative-empty-state-concept-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.creative-empty-state-facet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    /* Wide enough that the longest label (empty_state_facet_task) wraps to two
       lines at --text-0 instead of shredding into a four-line stack. */
    width: 108px;
}

.creative-empty-state-facet-chip {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--surface-section);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.creative-empty-state-facet-chip svg {
    width: 20px;
    height: 20px;
}

.creative-empty-state-facet-label {
    font-size: var(--text-0);
    color: var(--text-muted);
    line-height: 1.3;
    text-align: center;
    /* CJK text breaks mid-word by default; wrap at spaces instead. */
    word-break: keep-all;
}

.creative-empty-state-op {
    color: var(--text-muted);
    font-weight: var(--weight-6);
    font-size: var(--text-1);
    padding: 0 2px;
    align-self: flex-start;
    margin-top: 12px;
}

/* Glues each operator to the term it introduces, so a diagram too narrow for one
   row wraps before an operator instead of leaving one dangling at a row end. */
.creative-empty-state-term {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

/* Center the "=" beside the shorter result block instead of using the facet
   chip offset. */
.creative-empty-state-result .creative-empty-state-op {
    align-self: center;
    margin-top: 0;
}

.creative-empty-state-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 1.5px solid var(--color-active);
    border-radius: 10px;
    padding: 8px 12px;
    background: var(--surface-section);
}

.creative-empty-state-block-icons {
    display: flex;
    gap: 6px;
    color: var(--color-active);
}

.creative-empty-state-block-icons svg {
    width: 15px;
    height: 15px;
}

.creative-empty-state-block-label {
    font-size: var(--text-0);
    font-weight: var(--weight-6);
    color: var(--text-primary);
}

.creative-empty-state-concept-caption {
    font-size: var(--text-1);
    color: var(--text-muted);
    line-height: 1.55;
    margin: var(--space-3) 0 0;
    text-align: center;
}

/* --- Writable CTAs --- */
.creative-empty-state-actions-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

.add-creative-btn--cta {
    gap: 6px;
}

.add-creative-btn--cta svg {
    width: 14px;
    height: 14px;
}

.add-creative-btn-kbd {
    font-family: inherit;
    font-size: 10px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 2px;
}

/* --- Read-only variant: write-access request --- */
.creative-empty-state-readonly {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.creative-empty-state-readonly-message {
    font-size: var(--text-0);
    color: var(--text-muted);
    margin: 0;
    max-width: 340px;
}

/* Author-origin `display` beats the UA stylesheet's `[hidden] { display: none }`
   regardless of selector specificity, so the [hidden] overrides below are
   required or these elements would always render even while hidden — the
   request button carries the global `.btn` class (display: inline-flex from
   dark_mode.css), and the pending pill sets its own inline-flex below. */
.creative-empty-state-readonly .btn[hidden],
.creative-empty-state-request-pending[hidden] {
    display: none;
}

.creative-empty-state-request-pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-0);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 6px 14px;
    background: var(--surface-btn);
}

.creative-empty-state-request-pending-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-round);
    background: var(--color-brand);
    animation: creative-empty-state-pulse 1.6s ease-in-out infinite;
}

@keyframes creative-empty-state-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* --- Unauthenticated variant: sign up / log in --- */
.creative-empty-state-loggedout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.creative-empty-state-loggedout-message {
    font-size: var(--text-0);
    color: var(--text-muted);
    margin: 0;
    max-width: 340px;
}