: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 {
    min-width: 200px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
    padding: var(--space-1);
    background: var(--surface-section);
}

#creative-overflow-menu .popup-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-2);
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: var(--text-1);
    cursor: pointer;
    transition: background 0.15s var(--ease-out-2);
    white-space: nowrap;
}

#creative-overflow-menu .popup-menu-item:hover {
    background: var(--surface-hover);
}

#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 and images to be clickable independently of the parent link */
.creative-content a[download],
.creative-content img {
    pointer-events: auto;
    position: relative;
    z-index: var(--layer-1);
}

.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);
}

/* Progress toggle (hover-to-complete) */
.progress-toggle-wrap {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding-top: 4px;
}

.progress-toggle-wrap .creative-progress-complete,
.progress-toggle-wrap .creative-progress-incomplete {
    padding-top: 0;
}

.progress-toggle-checkbox {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    z-index: 1;
}

/* Desktop: show checkbox on row hover (same pattern as edit-btn, comments-btn) */
@media (hover: hover) {
    .progress-toggle-checkbox {
        width: 1em;
        height: 1em;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        margin: auto;
        pointer-events: none;
    }

    .creative-row:hover .progress-toggle-wrap .creative-progress-complete,
    .creative-row:hover .progress-toggle-wrap .creative-progress-incomplete {
        display: none;
    }

    .creative-row:hover .progress-toggle-checkbox {
        visibility: visible;
        opacity: 1;
        position: relative;
        pointer-events: auto;
        accent-color: var(--color-brand);
    }
}

/* Touch devices: always show both text and clickable area */
@media (hover: none) {
    .progress-toggle-checkbox {
        opacity: 0;
        pointer-events: auto;
    }
}

.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;
}

.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;
}


/* 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);
}