diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 3272d1f8ad..17c9c9a8af 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -258,6 +258,7 @@ function RemoteFunctions(config = {}) {
         screenOffset: screenOffset,
         selectElement: selectElement,
         isSelectedFromEditor: function () { return _selectedFromEditor; },
+        isNamedSelection: _isNamedSelection,
         sendSelectionToEditor: sendSelectionToEditor,
         brieflyDisableHoverListeners: brieflyDisableHoverListeners,
         handleElementClick: handleElementClick,
diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js
index 69f3b3a4d1..83e801f8f0 100644
--- a/src/extensions/default/InlineColorEditor/ColorEditor.js
+++ b/src/extensions/default/InlineColorEditor/ColorEditor.js
@@ -32,7 +32,7 @@ define(function (require, exports, module) {
         tinycolor          = brackets.getModule("thirdparty/tinycolor");
 
     /** Mustache template that forms the bare DOM structure of the UI */
-    var ColorEditorTemplate = require("text!ColorEditorTemplate.html");
+    var ColorEditorTemplate = require("text!./ColorEditorTemplate.html");
 
     /**
      * @const @type {number}
@@ -131,9 +131,10 @@ define(function (require, exports, module) {
 
         this._redoColor = null;
         this._isUpperCase = PreferencesManager.get("uppercaseColors");
-        PreferencesManager.on("change", "uppercaseColors", function () {
+        this._handleUppercaseColorsChange = function () {
             this._isUpperCase = PreferencesManager.get("uppercaseColors");
-        }.bind(this));
+        }.bind(this);
+        PreferencesManager.on("change", "uppercaseColors", this._handleUppercaseColorsChange);
 
         this.$colorValue = this.$element.find(".color-value");
         this.$buttonList = this.$element.find("ul.button-bar");
@@ -270,7 +271,7 @@ define(function (require, exports, module) {
      * Remove any preference listeners before destroying the editor.
      */
     ColorEditor.prototype.destroy = function () {
-        PreferencesManager.off("change", "uppercaseColors");
+        PreferencesManager.off("change", "uppercaseColors", this._handleUppercaseColorsChange);
     };
 
     /**
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index 1e668a23c5..dad4322828 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -828,6 +828,18 @@ define({
     "LIVE_PREVIEW_LAYERS_SCRIPT_GENERATED": "Generated by script, not in the source file",
     "LIVE_PREVIEW_LAYERS_TAG_TOOLTIP": "Show Tag Name Tooltip",
     "LIVE_PREVIEW_LAYERS_INSERT_ELEMENT": "Insert Element",
+    "LIVE_PREVIEW_LAYERS_CHANGE_COLOR": "Change color",
+    "LIVE_PREVIEW_LAYERS_COPY_DECLARATION": "Copy property",
+    "LIVE_PREVIEW_LAYERS_COPY_RULE": "Copy rule",
+    "LIVE_PREVIEW_LAYERS_PASTE_PROPERTIES": "Paste properties",
+    "LIVE_PREVIEW_LAYERS_PASTE": "Paste",
+    "LIVE_PREVIEW_LAYERS_STYLES_MENU_HINT": "Right-click to copy or paste styles",
+    "LIVE_PREVIEW_LAYERS_PASTE_INVALID": "Paste CSS properties or one complete selector at a time.",
+    "LIVE_PREVIEW_LAYERS_PASTE_FAILED": "Couldn’t paste these properties. Try again.",
+    "LIVE_PREVIEW_LAYERS_PASTED": "Properties pasted into {0}",
+    "LIVE_PREVIEW_LAYERS_COPY_FAILED": "Couldn’t copy these styles. Try again.",
+    "LIVE_PREVIEW_LAYERS_ADD_INLINE_STYLE": "Add Inline Style",
+    "LIVE_PREVIEW_LAYERS_INSERT_POSITION": "Placement",
     "LIVE_PREVIEW_LAYERS_INSERT_INTO_PAGE": "Add to the page",
     "LIVE_PREVIEW_LAYERS_INSERT_LOADING": "Loading elements…",
     "LIVE_PREVIEW_LAYERS_INSERT_UNAVAILABLE": "The live preview did not answer. Try again in a moment.",
@@ -836,7 +848,7 @@ define({
     "LIVE_PREVIEW_LAYERS_EMPTY_PAGE_PROPERTIES": "The page is empty. Add an element to see its properties.",
     "LIVE_PREVIEW_LAYERS_EMPTY_PAGE_STYLES": "The page is empty. Add an element to see its styles.",
     "LIVE_PREVIEW_LAYERS_SHOW_SELECTED": "Show the selected element",
-    "LIVE_PREVIEW_LAYERS_SCRUB_HINT": "Drag to adjust, double-click to edit",
+    "LIVE_PREVIEW_LAYERS_SCRUB_HINT": "Drag to adjust. Scroll or use arrow keys while editing. Shift: larger steps, Alt: smaller steps",
     "LIVE_PREVIEW_LAYERS_PROPERTY_PLACEHOLDER": "property",
     "LIVE_PREVIEW_LAYERS_VALUE_PLACEHOLDER": "value",
 
diff --git a/src/styles/Extn-LayersPanel.less b/src/styles/Extn-LayersPanel.less
index 0baf7a0d58..785d263428 100644
--- a/src/styles/Extn-LayersPanel.less
+++ b/src/styles/Extn-LayersPanel.less
@@ -297,7 +297,7 @@
         flex-shrink: 0;
     }
 
-    .layers-section-actions .layers-hdr-btn:not(.layers-active) {
+    .layers-section-actions .layers-hdr-btn:not(.layers-active):not(.layers-add-inline) {
         display: none;
     }
 
@@ -320,6 +320,12 @@
         }
     }
 
+    .layers-add-inline:disabled {
+        opacity: 0.4;
+        background: none;
+        cursor: default;
+    }
+
     .layers-maximize {
         opacity: 0;
 
@@ -511,7 +517,6 @@
 
         &.layers-selected {
             background: @layers-row-select-bg;
-            box-shadow: inset 2px 0 0 @layers-accent;
         }
 
         &.layers-match {
@@ -677,7 +682,7 @@
     }
 
     .layers-node.layers-root-node .layers-node-tag {
-        font-weight: 500;
+        font-weight: 400;
         color: @project-panel-text-2;
     }
 
@@ -737,7 +742,7 @@
         background: @layers-row-select-bg;
     }
 
-    .layers-node.layers-holds-selected:not(:hover) .layers-node-tools {
+    .layers-node.layers-holds-selected .layers-node-tools {
         background: @layers-row-holder-bg;
     }
 
@@ -833,7 +838,7 @@
         }
     }
 
-    .layers-decl:not(.layers-editing) .layers-decl-value.layers-decl-numeric {
+    .layers-decl-value.layers-decl-numeric {
         cursor: ew-resize;
     }
 
@@ -994,8 +999,45 @@
         color: @layers-prop-value;
     }
 
+    .layers-decl-value-wrap {
+        display: inline-flex;
+        align-items: center;
+        flex: none;
+        gap: 4px;
+        margin-left: 5px;
+
+        .layers-decl-value {
+            margin-left: 0;
+        }
+    }
+
+    .layers-decl-color {
+        position: relative;
+        flex: none;
+        width: 12px;
+        height: 12px;
+        padding: 0;
+        border: 1px solid rgba(255, 255, 255, 0.25);
+        border-radius: 2px;
+        background: repeating-conic-gradient(#999 0% 25%, #fff 0% 50%) 0 0 / 6px 6px;
+        cursor: pointer;
+
+        &::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: var(--layers-color);
+        }
+
+        &:focus-visible {
+            outline: 1px solid @layers-accent;
+            outline-offset: 2px;
+        }
+    }
+
     input.layers-decl-input[type="text"] {
         .layers-field-input();
+        user-select: text;
         flex: none;
         min-width: 3ch;
         padding: 0 4px;
@@ -1045,10 +1087,56 @@
         display: flex;
     }
 
-    .layers-decl.layers-editing .layers-decl-actions {
+    .layers-decl.layers-editing .layers-decl-actions,
+    .layers-decl.layers-copied .layers-decl-actions {
         display: none;
     }
 
+    .layers-decl.layers-menu-target,
+    .layers-rule-header.layers-menu-target {
+        background: @layers-hover-bg;
+    }
+
+    .layers-decl.layers-copied {
+        animation: layers-flash-row 800ms ease-out;
+    }
+
+    .layers-rule-header.layers-copied {
+        border-radius: 3px;
+        animation: layers-flash-row 800ms ease-out;
+    }
+
+    .layers-copied-tip {
+        position: fixed;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        box-sizing: border-box;
+        height: 20px;
+        margin-top: -10px;
+        padding: 0 8px 0 6px;
+        border: 1px solid fade(@layers-accent, 55%);
+        border-radius: 10px;
+        background: #2a2a2a;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+        color: @project-panel-text-1;
+        font-size: @sidebar-xs-font-size;
+        white-space: nowrap;
+        pointer-events: none;
+        animation: layers-copied-tip 1400ms ease-out forwards;
+
+        .layers-copied-icon {
+            display: flex;
+            color: @layers-accent;
+
+            svg {
+                width: 12px;
+                height: 12px;
+            }
+        }
+    }
+
     .layers-decl.layers-overridden {
         .layers-decl-field {
             text-decoration: line-through;
@@ -1088,6 +1176,20 @@
         min-height: 20px;
     }
 
+    .layers-rule-header:focus-visible {
+        outline: 1px solid @layers-accent;
+        outline-offset: 2px;
+    }
+
+    .layers-style-notice {
+        padding: 8px;
+        margin-bottom: 6px;
+        border-radius: 4px;
+        background: @layers-accent-soft;
+        color: @project-panel-text-1;
+        font-size: @sidebar-small-font-size;
+    }
+
     .layers-rule-selector {
         flex: 1;
         min-width: 0;
@@ -1188,342 +1290,371 @@ body.layers-scrubbing {
 }
 
 .layers-insert-popup {
+    @layers-insert-accent: @layers-accent;
+    @layers-insert-scrollbar: #555555;
+    @layers-insert-scrollbar-hover: #707070;
+
     position: fixed;
     z-index: 1000;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    padding: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
-    background: #2a2a2a;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.3);
+    border: 1px solid @layers-border;
+    border-radius: 3px;
+    background: @bc-ai-sidebar-bg;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
     color: @project-panel-text-1;
-    font-size: @sidebar-small-font-size;
+    color-scheme: dark;
+    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 12.5px;
+    line-height: 1.3;
     letter-spacing: normal;
     text-shadow: none;
     animation: layers-notice-in 90ms ease-out;
 
-    .layers-insert-head {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        min-height: 24px;
-        padding: 0 0 8px;
-        white-space: nowrap;
-    }
+    button {
+        margin: 0;
+        box-shadow: none;
+        font: inherit;
+        text-align: left;
 
-    .layers-insert-where {
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-weight: 600;
-        color: @project-panel-text-1;
+        &:focus-visible {
+            outline: 1px solid @layers-insert-accent;
+            outline-offset: -1px;
+        }
     }
 
-    .layers-node-icon {
+    .layers-insert-head {
         display: flex;
         align-items: center;
-        justify-content: center;
-        width: 15px;
-        height: 15px;
+        justify-content: space-between;
+        gap: 8px;
+        min-height: 30px;
+        padding: 0 8px;
+        background: @layers-input-bg;
         flex: none;
-        color: @project-panel-text-2;
+    }
 
-        svg {
-            width: 15px;
-            height: 15px;
-            display: block;
-        }
+    .layers-icon-btn {
+        .layers-icon-button();
+        width: 22px;
+        height: 22px;
     }
 
     .layers-insert-target {
         display: flex;
-        flex: 0 1 auto;
         align-items: center;
         gap: 4px;
-        min-width: 40px;
-        max-width: 38%;
-        height: 24px;
-        padding: 0 7px 0 5px;
-        box-sizing: border-box;
-        border-radius: 6px;
-        background: @layers-accent-soft;
-        color: @project-panel-text-1;
-
-        .layers-node-icon {
-            width: 14px;
-            height: 14px;
-            color: @layers-accent;
-
-            svg {
-                width: 14px;
-                height: 14px;
-            }
-        }
+        flex: 0 1 auto;
+        min-width: 0;
     }
 
-    .layers-insert-target-name {
-        min-width: 0;
+    .layers-insert-target-name,
+    .layers-insert-where {
+        font-size: 11.5px;
+        font-weight: 600;
         overflow: hidden;
         text-overflow: ellipsis;
-        font-family: @layers-mono;
-        font-size: @sidebar-xs-font-size;
-        font-weight: 500;
+        white-space: nowrap;
     }
 
-    .layers-insert-positions {
-        display: flex;
-        flex: 1 1 auto;
-        min-width: 0;
-        gap: 2px;
-        padding: 2px;
-        border-radius: 6px;
-        background: rgba(255, 255, 255, 0.06);
+    .layers-insert-close {
+        margin-left: auto;
     }
 
-    .layers-insert-pos {
-        display: flex;
-        flex: 1 1 0;
-        align-items: center;
-        justify-content: center;
-        gap: 3px;
-        min-width: 0;
-        height: 20px;
-        padding: 0 4px;
+    .layers-insert-placement {
+        position: relative;
+        flex: none;
+        max-width: 45%;
+    }
+
+    .layers-insert-position {
+        width: auto;
+        max-width: 100%;
+        box-sizing: border-box;
+        height: 24px;
         margin: 0;
-        border: none;
-        border-radius: 4px;
-        background: transparent;
+        padding: 2px 24px 2px 7px;
+        border: 1px solid @layers-border;
+        border-radius: 3px;
+        box-shadow: none;
+        background: @layers-input-bg;
         color: @project-panel-text-1;
-        font-family: inherit;
-        font-size: 10px;
-        font-weight: 500;
-        opacity: 0.8;
+        font: inherit;
+        font-size: 11.5px;
+        text-overflow: ellipsis;
+        appearance: none;
         cursor: pointer;
-        outline: none;
-
-        svg {
-            width: 12px;
-            height: 12px;
-            flex: none;
-        }
 
-        span {
-            min-width: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+        &:hover {
+            background: @layers-hover-bg;
+            border-color: fade(@layers-insert-accent, 40%);
         }
 
-        &:hover {
-            background: rgba(255, 255, 255, 0.1);
-            opacity: 1;
+        &:focus-visible {
+            outline: 1px solid @layers-insert-accent;
+            outline-offset: -1px;
         }
 
-        &.layers-active {
-            background: @layers-accent;
-            color: #ffffff;
-            opacity: 1;
-            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+        option {
+            background: @bc-ai-sidebar-bg;
+            color: @project-panel-text-1;
         }
+    }
 
-        &:disabled {
-            opacity: 0.3;
-            cursor: default;
+    .layers-insert-chevron {
+        position: absolute;
+        top: 0;
+        right: 6px;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        color: @project-panel-text-2;
+        pointer-events: none;
 
-            &:hover {
-                background: transparent;
-            }
+        svg {
+            width: 12px;
+            height: 12px;
         }
     }
 
     .layers-insert-search {
+        flex: none;
         display: flex;
         align-items: center;
-        gap: 6px;
-        height: 26px;
-        padding: 0 6px 0 8px;
-        box-sizing: border-box;
-        border: 1px solid @layers-border;
-        border-radius: 6px;
+        position: relative;
+        margin-bottom: 6px;
+    }
+
+    .layers-insert-search-icon {
+        position: absolute;
+        left: 7px;
+        display: flex;
+        align-items: center;
+        color: @project-panel-text-2;
+        pointer-events: none;
+    }
+
+    .layers-insert-search-icon > svg {
+        width: 13px;
+        height: 13px;
+    }
+
+    .layers-insert-search input[type="text"] {
+        height: auto;
+        margin: 0;
+        box-shadow: none;
+        line-height: 1.3;
+        width: 100%;
         background: @layers-input-bg;
+        border: 1px solid @layers-border;
+        border-radius: 3px;
+        color: @project-panel-text-1;
+        font-size: 12px;
+        padding: 4px 8px 4px 26px;
+        outline: none;
+        font-family: inherit;
+        box-sizing: border-box;
+    }
 
-        &:focus-within {
-            border-color: @layers-accent;
-            background: @layers-input-bg-focus;
-        }
+    .layers-insert-search input[type="text"]:focus {
+        border-color: @layers-insert-accent;
+    }
 
-        > svg {
-            width: 13px;
-            height: 13px;
-            flex: none;
-            color: @project-panel-text-2;
-        }
+    .layers-insert-search.layers-insert-search-connected {
+        margin-bottom: 0;
+    }
 
-        input[type="text"] {
-            flex: 1;
-            min-width: 0;
-            height: 100%;
-            padding: 0;
-            margin: 0;
-            border: none;
-            outline: none;
-            box-shadow: none;
-            background: transparent;
-            color: @project-panel-text-1;
-            font-family: inherit;
-            font-size: @sidebar-small-font-size;
+    .layers-insert-search-connected input[type="text"] {
+        border-radius: 3px 3px 0 0;
+    }
 
-            &::placeholder {
-                color: @project-panel-text-2;
-                opacity: 0.75;
-            }
-        }
+    .layers-insert-search input[type="text"]::placeholder {
+        color: @project-panel-text-2;
+    }
+
+    .layers-insert-content {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        padding: 8px;
     }
 
     .layers-insert-list {
-        margin: 8px -6px 0 0;
-        padding: 0;
-        overflow-y: auto;
+        flex: 1;
+        overflow-y: scroll;
         overflow-x: hidden;
+        min-height: 0;
+        scrollbar-width: thin;
+        scrollbar-color: @layers-insert-scrollbar @bc-ai-sidebar-bg;
         scrollbar-gutter: stable;
+        overscroll-behavior: contain;
+    }
 
-        &::-webkit-scrollbar {
-            width: 6px !important;
-            background-color: transparent !important;
+    @supports selector(::-webkit-scrollbar) {
+        .layers-insert-list {
+            scrollbar-width: auto;
+            scrollbar-color: auto;
         }
+    }
 
-        &::-webkit-scrollbar-thumb {
-            border-radius: 3px !important;
-            border: none !important;
-            background-color: rgba(255, 255, 255, 0.18) !important;
-        }
+    .layers-insert-list::-webkit-scrollbar {
+        width: 6px !important;
+        height: 6px !important;
+        background: @bc-ai-sidebar-bg !important;
+    }
+
+    .layers-insert-list::-webkit-scrollbar-track {
+        margin: 0 !important;
+        background: @bc-ai-sidebar-bg !important;
+    }
+
+    .layers-insert-list::-webkit-scrollbar-thumb {
+        border: none !important;
+        border-radius: 3px !important;
+        background: @layers-insert-scrollbar !important;
+        background-clip: padding-box !important;
+    }
+
+    .layers-insert-list::-webkit-scrollbar-thumb:hover {
+        background: @layers-insert-scrollbar-hover !important;
+    }
+
+    .layers-insert-list::-webkit-scrollbar-corner {
+        background: @bc-ai-sidebar-bg !important;
     }
 
     .layers-insert-grid {
         display: grid;
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-        gap: 4px;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px 12px;
     }
 
-    .layers-insert-item {
-        border-radius: 5px;
+    .layers-insert-tile {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+        padding: 6px;
+        border: 1px solid @layers-border;
+        border-radius: 3px;
         cursor: pointer;
+        min-width: 0;
+        background: transparent;
+        transition:
+            border-color 0.12s,
+            background 0.12s;
+    }
 
-        &.layers-insert-selected {
-            background: @layers-accent-strong;
-
-            .layers-node-icon,
-            .layers-insert-item-tag {
-                color: @project-panel-text-1;
-            }
-        }
+    .layers-insert-tile:hover {
+        background: @layers-hover-bg;
+        border-color: @layers-insert-accent;
     }
 
-    .layers-insert-tile {
+    .layers-node-icon {
         display: flex;
-        flex-direction: column;
         align-items: center;
-        justify-content: center;
-        gap: 3px;
+        flex-shrink: 0;
+        color: @project-panel-text-2;
+    }
+
+    .layers-node-icon > svg {
+        width: 16px;
+        height: 16px;
+        stroke-width: 1.8px;
+    }
+
+    .layers-insert-item-text {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
         min-width: 0;
-        height: 42px;
-        padding: 0 3px;
-        box-sizing: border-box;
-        border: 1px solid @layers-border;
-        background: rgba(255, 255, 255, 0.03);
+        overflow: hidden;
+        flex: 1;
+    }
 
-        .layers-node-icon {
-            width: 15px;
-            height: 15px;
-            color: @project-panel-text-1;
+    .layers-insert-item-text-inner {
+        display: inline-flex;
+        align-items: baseline;
+        gap: 4px;
+        white-space: nowrap;
+        width: 100%;
+        justify-content: space-between;
+    }
 
-            svg {
-                width: 15px;
-                height: 15px;
-            }
-        }
+    .layers-insert-tile:hover .layers-insert-item-text-inner {
+        animation: layers-insert-text-scroll 2s ease-in-out 0.3s;
+    }
 
-        .layers-insert-item-name {
-            max-width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            font-size: 10px;
-            line-height: 1.2;
-        }
+    @keyframes layers-insert-text-scroll {
+        0%, 15% { transform: translateX(0); }
+        50% { transform: translateX(min(0px, calc(-100% + 140px))); }
+        85%, 100% { transform: translateX(0); }
+    }
 
-        &.layers-insert-selected {
-            border-color: @layers-accent;
+    .layers-insert-item-name {
+        font-size: 11.5px;
+        color: @project-panel-text-1;
+        white-space: nowrap;
+        line-height: 1.3;
+    }
 
-            .layers-node-icon {
-                color: @layers-accent;
-            }
-        }
+    .layers-insert-item-tag {
+        font-size: 9.5px;
+        color: @layers-insert-accent;
+        font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+        line-height: 1.3;
     }
 
-    .layers-insert-more {
+    .layers-insert-create {
         display: flex;
         align-items: center;
-        justify-content: center;
-        gap: 4px;
-        width: 100%;
-        height: 24px;
-        margin: 6px 0 0;
-        padding: 0;
-        border: none;
-        border-radius: 4px;
-        background: transparent;
-        color: @project-panel-text-2;
-        font-family: inherit;
-        font-size: @sidebar-xs-font-size;
+        gap: 6px;
+        padding: 5px 8px 5px 26px;
         cursor: pointer;
-        outline: none;
+        border-radius: 0 0 3px 3px;
+        margin: 0 0 6px;
+        border: 1px solid @layers-border;
+        border-top: none;
+        background: transparent;
+        flex-shrink: 0;
+    }
 
-        svg {
-            width: 11px;
-            height: 11px;
-            flex: none;
-            transition: transform 120ms ease;
-        }
+    .layers-insert-create:hover {
+        background: @layers-hover-bg;
+    }
 
-        &.layers-insert-open svg {
-            transform: rotate(180deg);
-        }
+    .layers-insert-empty {
+        font-size: 11px;
+        color: @project-panel-text-2;
+        font-style: italic;
+        padding: 12px 4px;
+        text-align: center;
+    }
 
-        &:hover {
-            background: @layers-hover-bg;
-            color: @project-panel-text-1;
-        }
+    .layers-insert-custom {
+        flex: none;
     }
 
     .layers-insert-create {
-        display: flex;
-        align-items: center;
-        gap: 7px;
-        height: 24px;
-        margin-top: 4px;
-        padding: 0 6px;
-        white-space: nowrap;
+        width: 100%;
+        box-sizing: border-box;
+        color: @project-panel-text-2;
 
-        .layers-node-icon {
-            color: @layers-accent;
+        .layers-node-icon svg {
+            width: 14px;
+            height: 14px;
         }
 
         .layers-insert-item-name {
-            flex: 1;
-            min-width: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
+            font-size: 12px;
+            color: @project-panel-text-2;
 
-    .layers-insert-empty {
-        padding: 8px 6px;
-        color: @project-panel-text-2;
-        white-space: normal;
+            span {
+                color: @project-panel-text-1;
+                font-weight: 600;
+            }
+        }
     }
 }
 
@@ -1725,6 +1856,23 @@ body.layers-dnd-invalid {
     }
 }
 
+@keyframes layers-copied-tip {
+    0% {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+
+    12%, 80% {
+        opacity: 1;
+        transform: none;
+    }
+
+    100% {
+        opacity: 0;
+        transform: none;
+    }
+}
+
 @keyframes layers-notice-in {
     0% {
         opacity: 0;
@@ -1774,3 +1922,101 @@ body.layers-dnd-invalid {
         animation-duration: 1ms;
     }
 }
+
+.layers-color-popup {
+    position: fixed;
+    z-index: 1000;
+    box-sizing: border-box;
+    padding: 12px;
+    overflow: auto;
+    border: 1px solid @layers-border;
+    border-radius: 10px;
+    background: @bc-ai-sidebar-bg;
+    color: @project-panel-text-1;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
+
+    .layers-color-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        font-size: @sidebar-small-font-size;
+        font-weight: 500;
+    }
+
+    .layers-icon-btn {
+        .layers-icon-button();
+    }
+
+    .color-editor {
+        min-width: 0;
+        width: 100%;
+        height: auto;
+        padding: 0;
+
+        aside {
+            display: none;
+        }
+
+        section {
+            display: block;
+            width: 100%;
+
+            .sliders {
+                display: flex;
+                align-items: stretch;
+            }
+
+            .color-selection-field {
+                flex: 1;
+                min-width: 0;
+                width: auto;
+                margin-right: 12px;
+                float: none;
+            }
+
+            .slider {
+                flex: none;
+                margin-right: 12px;
+                float: none;
+            }
+
+            .opacity-slider {
+                margin-right: 0;
+            }
+
+            footer {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                padding-top: 12px;
+            }
+
+            footer input.color-value {
+                flex: 1;
+                min-width: 0;
+                width: 0;
+                height: 26px;
+                margin: 0;
+                padding: 0 6px;
+                border-color: @layers-border;
+                background: @layers-input-bg;
+                color: @project-panel-text-1;
+                font-family: @layers-mono;
+                font-size: 11px;
+
+                &:focus {
+                    border-color: @layers-accent;
+                    background: @layers-input-bg-focus;
+                    box-shadow: none;
+                }
+            }
+        }
+
+        ul.button-bar {
+            flex: none;
+            margin-left: 0;
+            white-space: nowrap;
+        }
+    }
+}