@innovastudio/contentbox 1.6.194 → 1.6.196

package/public/contentbox/contentbox.css

@@ -1,9 +1,76 @@
+@charset "UTF-8";
 /* 
 @import url("../ionicons/css/ionicons.min.css"); 
 @import url("../icons/bootstrap-icons.min.css");  
 */
 @import url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.0/css/ionicons.min.css");
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
+body {
+  --cb-surface: #fff;
+  --cb-chat-bubble-bg: #171717;
+  --cb-chat-bubble-text: #ffffff;
+  --cb-surface-2: rgba(0,0,0,.04);
+  --cb-surface-3: rgba(250,250,250,1);
+  --cb-float-surface: rgba(255,255,255,.95);
+  --cb-text: rgba(0,0,0,.92);
+  --cb-text-2: rgba(0,0,0,.7);
+  --cb-text-3: rgba(0,0,0,.4);
+  --cb-text-4: rgba(0,0,0,.28);
+  --cb-line: rgba(0,0,0,.09);
+  --cb-line-2: rgba(0,0,0,.05);
+  --cb-line-4: rgba(0,0,0,.18);
+  --cb-fill: rgba(0,0,0,.05);
+  --cb-fill-hover: rgba(0,0,0,.08);
+  --cb-fill-active: rgba(0,0,0,.09);
+  --cb-accent: #2c6fdb;
+  --cb-accent-fill: rgba(44,111,219,.12);
+  --cb-accent-fill-2: rgba(44,111,219,.2);
+  --cb-accent-fill-3: rgba(0,0,0,0.05);
+  --cb-accent-line: rgba(44,111,219,.45);
+  --cb-danger: #e84949;
+  --cb-danger-fill: rgba(232,73,73,.16);
+  --cb-success: #3aa76d;
+  --cb-shadow: -1px 5px 8px 0px rgba(0,0,0,.08);
+  --cb-shadow-2: 3px 11px 24px 0px rgba(0,0,0,.05);
+  --cb-on-accent: #fff;
+}
+
+body.dark, body.colored, body.colored-dark {
+  --cb-surface: #2b2b2b;
+  --cb-chat-bubble-bg: #181818;
+  --cb-chat-bubble-text: #f0f0f0;
+  --cb-surface-2: rgba(255,255,255,.07);
+  --cb-surface-3: rgba(78,78,78,1);
+  --cb-float-surface: rgba(38,38,40,.96);
+  --cb-text: rgba(255,255,255,.92);
+  --cb-text-2: rgba(255,255,255,.82);
+  --cb-text-3: rgba(255,255,255,.45);
+  --cb-text-4: rgba(255,255,255,.32);
+  --cb-line: rgba(255,255,255,.14);
+  --cb-line-2: rgba(255,255,255,.08);
+  --cb-line-4: rgba(255,255,255,.22);
+  --cb-fill: rgba(255,255,255,.08);
+  --cb-fill-hover: rgba(255,255,255,.14);
+  --cb-fill-active: rgba(255,255,255,.2);
+  --cb-accent: #5b9dff;
+  --cb-accent-fill: rgba(91,157,255,.18);
+  --cb-accent-fill-2: rgba(91,157,255,.28);
+  --cb-accent-fill-3: rgba(255,255,255,.09);
+  --cb-accent-line: rgba(91,157,255,.55);
+  --cb-danger: #ff6b6b;
+  --cb-danger-fill: rgba(255,107,107,.2);
+  --cb-success: #57c993;
+  --cb-shadow: -1px 5px 14px 0px rgba(0,0,0,.55);
+  --cb-shadow-2: 3px 11px 24px 0px rgba(0,0,0,.45);
+}
+
+body.dark .motion-dock, body.dark .cascade-dock, body.dark .is-controlpanel, body.dark .is-modal, body.dark .is-sidebar, body.colored .motion-dock, body.colored .cascade-dock, body.colored .is-controlpanel, body.colored .is-modal, body.colored .is-sidebar, body.colored-dark .motion-dock, body.colored-dark .cascade-dock, body.colored-dark .is-controlpanel, body.colored-dark .is-modal, body.colored-dark .is-sidebar {
+  color-scheme: dark;
+}
+body.dark .motion-dock iframe, body.dark .cascade-dock iframe, body.dark .is-controlpanel iframe, body.dark .is-modal iframe, body.dark .is-sidebar iframe, body.colored .motion-dock iframe, body.colored .cascade-dock iframe, body.colored .is-controlpanel iframe, body.colored .is-modal iframe, body.colored .is-sidebar iframe, body.colored-dark .motion-dock iframe, body.colored-dark .cascade-dock iframe, body.colored-dark .is-controlpanel iframe, body.colored-dark .is-modal iframe, body.colored-dark .is-sidebar iframe {
+  color-scheme: light;
+}
+
 :root {
   --focus-outline-color: #3e93f7;
   --rangeslider-thumb-color: #0e75de;
@@ -20,10 +87,18 @@
     height: 1.2rem !important;
   }
 }
+/* The canvas: the device-mode frame the page is edited in.
+ *
+ * Sized and scaled by iframepanel.applyCanvasScale(), which measures the workspace
+ * and publishes the result as the custom properties below. See canvas-size.js for
+ * why this cannot be media queries: what overflows is height, the tiers keyed on
+ * width, and a fit-to-box factor is a ratio of two lengths, which CSS cannot form.
+ *
+ * The sizes here are the pre-script state and the fallback. They match CANVAS_SIZES.
+ */
 .is-content-view.desktop-lg {
   width: 1920px;
   height: 1080px;
-  transform: scale(0.74);
 }
 .is-content-view.desktop {
   width: 1366px;
@@ -42,594 +117,6 @@
   height: 844px;
 }
 
-/* large screen*/
-@media all and (min-width: 1920px) {
-  .is-content-view.desktop-lg {
-    width: 1920px;
-    height: 1080px;
-    transform: scale(0.74);
-  }
-
-  .is-content-view.desktop {
-    width: 1366px;
-    height: 853px;
-    transform: scale(0.96);
-  }
-
-  .is-content-view.tablet-landscape {
-    width: 1120px;
-    height: 820px;
-    transform: scale(0.98);
-  }
-
-  .is-content-view.tablet {
-    width: 768px;
-    height: 1024px;
-    transform: scale(0.8);
-  }
-
-  .is-content-view.mobile {
-    width: 390px;
-    height: 844px;
-    transform: scale(0.98);
-  }
-}
-@media all and (min-width: 1940px) {
-  .is-content-view.desktop-lg {
-    width: 1920px;
-    height: 1080px;
-    transform: scale(0.84);
-  }
-
-  .is-content-view.desktop {
-    width: 1620px;
-    height: 1012px;
-    transform: scale(1);
-  }
-
-  .is-content-view.tablet-landscape {
-    width: 1120px;
-    height: 820px;
-    transform: scale(1);
-  }
-
-  .is-content-view.tablet {
-    width: 768px;
-    height: 1024px;
-    transform: scale(1);
-  }
-
-  .is-content-view.mobile {
-    width: 390px;
-    height: 844px;
-    transform: scale(1);
-  }
-}
-@media all and (min-width: 2000px) {
-  .is-content-view.desktop-lg {
-    width: 1920px;
-    height: 1080px;
-    transform: scale(0.88);
-  }
-
-  .is-content-view.desktop {
-    width: 1730px;
-    height: 1080px;
-    transform: scale(1);
-  }
-
-  body.topspace .is-content-view.desktop-lg {
-    width: 1920px;
-    height: 1080px;
-    transform: scale(0.84);
-  }
-
-  body.topspace .is-content-view.desktop {
-    width: 1620px;
-    height: 1012px;
-    transform: scale(1);
-  }
-}
-@media all and (max-width: 1720px) {
-  .is-content-view {
-    transform: scale(0.89);
-  }
-  .is-content-view.desktop-lg {
-    transform: scale(0.62);
-  }
-  .is-content-view.tablet {
-    transform: scale(0.75);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.83);
-  }
-  body.topspace .is-content-view.desktop-lg {
-    transform: scale(0.62);
-  }
-  body.topspace .is-content-view.tablet {
-    transform: scale(0.7);
-  }
-}
-@media all and (max-width: 1920px) {
-  body.topspace .is-content-view.tablet {
-    transform: scale(0.7);
-  }
-}
-@media all and (max-width: 1620px) {
-  .is-content-view {
-    transform: scale(0.86);
-  }
-  .is-content-view.desktop-lg {
-    transform: scale(0.6);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.8);
-  }
-  body.topspace .is-content-view.desktop-lg {
-    transform: scale(0.6);
-  }
-  body.topspace .is-content-view.tablet {
-    transform: scale(0.7);
-  }
-}
-@media all and (max-width: 1520px) {
-  .is-content-view {
-    transform: scale(0.86);
-  }
-  .is-content-view.desktop-lg {
-    transform: scale(0.6);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.8);
-  }
-  body.topspace .is-content-view.desktop-lg {
-    transform: scale(0.59);
-  }
-}
-@media all and (max-width: 1450px) {
-  .is-content-view {
-    transform: scale(0.86);
-  }
-  .is-content-view.desktop-lg {
-    transform: scale(0.59);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.8);
-  }
-  body.topspace .is-content-view.desktop-lg {
-    transform: scale(0.6);
-  }
-}
-@media all and (max-width: 1390px) {
-  .is-content-view {
-    transform: scale(0.84);
-  }
-  .is-content-view.desktop-lg {
-    transform: scale(0.57);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.78);
-  }
-  body.topspace .is-content-view.desktop-lg {
-    transform: scale(0.57);
-  }
-}
-@media all and (max-width: 1330px) {
-  .is-content-view {
-    transform: scale(0.8);
-  }
-  .is-content-view.desktop-lg {
-    transform: scale(0.52);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.74);
-  }
-  body.topspace .is-content-view.desktop-lg {
-    transform: scale(0.52);
-  }
-}
-@media all and (max-width: 1270px) {
-  .is-content-view {
-    transform: scale(0.76);
-  }
-  .is-content-view.desktop-lg {
-    transform: scale(0.34);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.7);
-  }
-  body.topspace .is-content-view.desktop-lg {
-    transform: scale(0.34);
-  }
-}
-@media all and (max-width: 1210px) {
-  .is-content-view {
-    transform: scale(0.72);
-  }
-  .is-content-view.desktop-lg {
-    transform: scale(0.3);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.66);
-  }
-  body.topspace .is-content-view.desktop-lg {
-    transform: scale(0.3);
-  }
-}
-@media all and (max-width: 1150px) {
-  .is-content-view {
-    transform: scale(0.68);
-  }
-  .is-content-view.desktop-lg {
-    transform: scale(0.24);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.62);
-  }
-  body.topspace .is-content-view.desktop-lg {
-    transform: scale(0.24);
-  }
-}
-@media all and (max-width: 1090px) {
-  .is-content-view {
-    transform: scale(0.64);
-  }
-  .is-content-view.desktop-lg {
-    transform: scale(0.2);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.58);
-  }
-  body.topspace .is-content-view.desktop-lg {
-    transform: scale(0.2);
-  }
-}
-@media all and (max-width: 1024px) {
-  .is-content-view {
-    transform: scale(0.6);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.5);
-  }
-}
-@media all and (max-width: 970px) {
-  .is-content-view {
-    transform: scale(0.56);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.5);
-  }
-}
-@media all and (max-width: 900px) {
-  .is-content-view {
-    transform: scale(0.52);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.46);
-  }
-}
-@media all and (max-width: 850px) {
-  .is-content-view {
-    transform: scale(0.48);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.42);
-  }
-}
-@media all and (max-width: 790px) {
-  .is-content-view {
-    transform: scale(0.44);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.38);
-  }
-}
-@media all and (max-width: 730px) {
-  .is-content-view {
-    transform: scale(0.4);
-  }
-
-  body.topspace .is-content-view {
-    transform: scale(0.34);
-  }
-}
-body.controlpanel .is-content-view {
-  margin-right: 290px;
-}
-body.controlpanel .is-content-view.desktop-lg {
-  width: 1920px;
-  height: 1080px;
-  transform: scale(0.7);
-}
-body.controlpanel .is-content-view.desktop {
-  width: 1366px;
-  height: 853px;
-}
-body.controlpanel .is-content-view.tablet-landscape {
-  width: 1120px;
-  height: 820px;
-}
-body.controlpanel .is-content-view.tablet {
-  width: 768px;
-  height: 1024px;
-}
-body.controlpanel .is-content-view.mobile {
-  width: 390px;
-  height: 844px;
-}
-@media all and (min-width: 1920px) {
-  body.controlpanel .is-content-view.desktop-lg {
-    width: 1920px;
-    height: 1080px;
-    transform: scale(0.74);
-  }
-  body.controlpanel .is-content-view.desktop {
-    width: 1366px;
-    height: 853px;
-    transform: scale(0.96);
-  }
-  body.controlpanel .is-content-view.tablet-landscape {
-    width: 1120px;
-    height: 820px;
-    transform: scale(0.98);
-  }
-  body.controlpanel .is-content-view.tablet {
-    width: 768px;
-    height: 1024px;
-    transform: scale(0.8);
-  }
-  body.controlpanel .is-content-view.mobile {
-    width: 390px;
-    height: 844px;
-    transform: scale(0.98);
-  }
-}
-@media all and (min-width: 1940px) {
-  body.controlpanel .is-content-view.desktop-lg {
-    width: 1920px;
-    height: 1080px;
-    transform: scale(0.78);
-  }
-  body.controlpanel .is-content-view.desktop {
-    width: 1520px;
-    height: 949px;
-    transform: scale(1);
-  }
-  body.controlpanel .is-content-view.tablet-landscape {
-    width: 1120px;
-    height: 820px;
-    transform: scale(1);
-  }
-  body.controlpanel .is-content-view.tablet {
-    width: 768px;
-    height: 1024px;
-    transform: scale(1);
-  }
-  body.controlpanel .is-content-view.mobile {
-    width: 390px;
-    height: 844px;
-    transform: scale(1);
-  }
-}
-@media all and (min-width: 2080px) {
-  body.controlpanel .is-content-view.desktop-lg {
-    width: 1920px;
-    height: 1080px;
-    transform: scale(0.85);
-  }
-  body.controlpanel .is-content-view.desktop {
-    width: 1620px;
-    height: 1012px;
-  }
-  body.controlpanel .is-content-view.tablet-landscape {
-    width: 1120px;
-    height: 820px;
-  }
-}
-@media all and (min-width: 2250px) {
-  body.controlpanel .is-content-view.desktop-lg {
-    width: 1920px;
-    height: 1080px;
-    transform: scale(0.88);
-  }
-  body.controlpanel .is-content-view.desktop {
-    width: 1730px;
-    height: 1080px;
-    transform: scale(1);
-  }
-  body.controlpanel.topspace .is-content-view.desktop {
-    width: 1620px;
-    height: 1012px;
-    transform: scale(1);
-  }
-}
-@media all and (max-width: 1920px) {
-  body.controlpanel .is-content-view.tablet {
-    transform: scale(0.7);
-  }
-}
-@media all and (max-width: 1800px) {
-  body.controlpanel .is-content-view {
-    transform: scale(0.95);
-  }
-  body.controlpanel .is-content-view.desktop-lg {
-    transform: scale(0.66);
-  }
-  body.controlpanel .is-content-view.tablet {
-    transform: scale(0.7);
-  }
-  body.controlpanel.topspace .is-content-view {
-    transform: scale(0.9);
-  }
-  body.controlpanel.topspace .is-content-view.desktop-lg {
-    transform: scale(0.68);
-  }
-}
-@media all and (max-width: 1730px) {
-  body.controlpanel .is-content-view {
-    transform: scale(0.9);
-  }
-  body.controlpanel .is-content-view.desktop-lg {
-    transform: scale(0.62);
-  }
-  body.controlpanel.topspace .is-content-view {
-    transform: scale(0.85);
-  }
-  body.controlpanel.topspace .is-content-view.desktop-lg {
-    transform: scale(0.62);
-  }
-}
-@media all and (max-width: 1680px) {
-  body.controlpanel .is-content-view {
-    transform: scale(0.88);
-  }
-  body.controlpanel .is-content-view.desktop-lg {
-    transform: scale(0.62);
-  }
-  body.controlpanel.topspace .is-content-view {
-    transform: scale(0.83);
-  }
-  body.controlpanel.topspace .is-content-view.desktop-lg {
-    transform: scale(0.62);
-  }
-  body.controlpanel.topspace .is-content-view.tablet {
-    transform: scale(0.7);
-  }
-}
-@media all and (max-width: 1600px) {
-  body.controlpanel .is-content-view {
-    transform: scale(0.8);
-  }
-  body.controlpanel .is-content-view.desktop-lg {
-    transform: scale(0.58);
-  }
-  body.controlpanel.topspace .is-content-view {
-    transform: scale(0.75);
-  }
-  body.controlpanel.topspace .is-content-view.desktop-lg {
-    transform: scale(0.58);
-  }
-}
-@media all and (max-width: 1520px) {
-  body.controlpanel .is-content-view {
-    transform: scale(0.75);
-  }
-  body.controlpanel .is-content-view.desktop-lg {
-    transform: scale(0.54);
-  }
-  body.controlpanel.topspace .is-content-view {
-    transform: scale(0.7);
-  }
-  body.controlpanel.topspace .is-content-view.desktop-lg {
-    transform: scale(0.54);
-  }
-  body.controlpanel.topspace .is-content-view.tablet {
-    transform: scale(0.58);
-  }
-}
-@media all and (max-width: 1450px) {
-  body.controlpanel .is-content-view {
-    transform: scale(0.7);
-  }
-  body.controlpanel .is-content-view.desktop-lg {
-    transform: scale(0.5);
-  }
-  body.controlpanel.topspace .is-content-view {
-    transform: scale(0.65);
-  }
-  body.controlpanel.topspace .is-content-view.desktop-lg {
-    transform: scale(0.5);
-  }
-}
-@media all and (max-width: 1375px) {
-  body.controlpanel .is-content-view {
-    transform: scale(0.63);
-  }
-  body.controlpanel .is-content-view.desktop-lg {
-    transform: scale(0.46);
-  }
-  body.controlpanel.topspace .is-content-view {
-    transform: scale(0.58);
-  }
-  body.controlpanel.topspace .is-content-view.desktop-lg {
-    transform: scale(0.46);
-  }
-}
-@media all and (max-width: 1300px) {
-  body.controlpanel .is-content-view {
-    transform: scale(0.6);
-  }
-  body.controlpanel .is-content-view.desktop-lg {
-    transform: scale(0.42);
-  }
-  body.controlpanel.topspace .is-content-view {
-    transform: scale(0.55);
-  }
-  body.controlpanel.topspace .is-content-view.desktop-lg {
-    transform: scale(0.42);
-  }
-}
-@media all and (max-width: 1235px) {
-  body.controlpanel .is-content-view {
-    transform: scale(0.55);
-  }
-  body.controlpanel .is-content-view.desktop-lg {
-    transform: scale(0.38);
-  }
-  body.controlpanel.topspace .is-content-view {
-    transform: scale(0.5);
-  }
-  body.controlpanel.topspace .is-content-view.desktop-lg {
-    transform: scale(0.38);
-  }
-  body.controlpanel.topspace .is-content-view.tablet {
-    transform: scale(0.5);
-  }
-}
-@media all and (max-width: 1175px) {
-  body.controlpanel .is-content-view {
-    transform: scale(0.5);
-  }
-  body.controlpanel .is-content-view.desktop-lg {
-    transform: scale(0.34);
-  }
-  body.controlpanel.topspace .is-content-view {
-    transform: scale(0.45);
-  }
-  body.controlpanel.topspace .is-content-view.desktop-lg {
-    transform: scale(0.34);
-  }
-}
-@media all and (max-width: 1090px) {
-  body.controlpanel .is-content-view {
-    transform: scale(0.45);
-  }
-  body.controlpanel .is-content-view.desktop-lg {
-    transform: scale(0.3);
-  }
-  body.controlpanel.topspace .is-content-view {
-    transform: scale(0.4);
-  }
-  body.controlpanel.topspace .is-content-view.desktop-lg {
-    transform: scale(0.3);
-  }
-}
-
 /* /IFRAME */
 *, ::before, ::after {
   border-width: 0;
@@ -642,6 +129,7 @@ body.controlpanel .is-content-view.mobile {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   font-size: 14px;
   font-weight: 300;
+  color: var(--cb-text);
   /* content.css */
   /* /content.css */
 }
@@ -677,7 +165,7 @@ body.controlpanel .is-content-view.mobile {
   margin: 0.8rem 0 0.8rem;
 }
 .builder-ui a {
-  color: #000;
+  color: var(--cb-text);
 }
 .builder-ui .text-left {
   text-align: left;
@@ -897,6 +385,9 @@ body.controlpanel .is-content-view.mobile {
   width: 16px;
   height: 16px;
 }
+.builder-ui svg:not([fill]) {
+  fill: currentColor;
+}
 .builder-ui .tooltip {
   /* prevent overide by css framework */
   opacity: unset;
@@ -906,7 +397,7 @@ body.controlpanel .is-content-view.mobile {
 .builder-ui button {
   width: 38px;
   height: 34px;
-  color: #111;
+  color: var(--cb-text);
   background-color: transparent;
   box-shadow: none;
   margin: 2px;
@@ -923,6 +414,9 @@ body.controlpanel .is-content-view.mobile {
   line-height: 1;
   transition: all 0.15s ease;
 }
+.builder-ui button.w-full {
+  width: 100%;
+}
 .builder-ui button.auto {
   width: auto;
   padding: 0 14px;
@@ -933,14 +427,6 @@ body.controlpanel .is-content-view.mobile {
 .builder-ui button.btn-editcode, .builder-ui button.btn-editmodule {
   width: 100%;
   height: 39px;
-  background: rgb(135, 116, 215);
-  color: #fff;
-}
-.builder-ui button.btn-editcode svg, .builder-ui button.btn-editmodule svg {
-  fill: #fff;
-}
-.builder-ui button.btn-editcode:hover, .builder-ui button.btn-editmodule:hover {
-  background: rgb(135, 116, 215) !important;
 }
 .builder-ui button.is-btn-color {
   width: 41px;
@@ -951,14 +437,12 @@ body.controlpanel .is-content-view.mobile {
   width: 37px;
   height: 35px;
 }
-.builder-ui button.on {
-  background-color: rgb(237, 237, 237);
-}
-.builder-ui button.on:hover {
-  background-color: rgb(239, 239, 239);
-}
 .builder-ui button:not(.is-btn-color):hover {
-  background-color: rgb(243, 244, 246);
+  background-color: var(--cb-fill-hover);
+}
+.builder-ui button:not(.is-btn-color).on, .builder-ui button:not(.is-btn-color).active, .builder-ui button:not(.is-btn-color)[aria-pressed=true] {
+  background-color: var(--cb-accent-fill);
+  color: var(--cb-accent);
 }
 .builder-ui .panel-plugin .is-accordion {
   display: flex;
@@ -1045,7 +529,7 @@ body.controlpanel .is-content-view.mobile {
   margin: 20px 0 3px;
   font-weight: 400;
   line-height: 1.6;
-  color: #4b4b4b;
+  color: var(--cb-text-2);
   display: flex;
   flex-direction: column;
   background: transparent;
@@ -1102,7 +586,7 @@ body.controlpanel .is-content-view.mobile {
 .builder-ui .label.mb-3 {
   margin-bottom: 14px;
 }
-.builder-ui input[type=text], .builder-ui input[type=number], .builder-ui textarea {
+.builder-ui input[type=text], .builder-ui input[type=number], .builder-ui input[type=url], .builder-ui input[type=datetime-local], .builder-ui textarea {
   width: 100%;
   height: 43px;
   box-sizing: border-box;
@@ -1113,12 +597,12 @@ body.controlpanel .is-content-view.mobile {
   letter-spacing: 1px;
   padding: 0;
   padding-left: 8px;
-  color: #121212;
+  color: var(--cb-text);
   display: inline-block;
   border: none;
   border-bottom: none;
   border-radius: 5px;
-  background-color: #f6f6f6;
+  background-color: var(--cb-fill);
   flex: none;
 }
 .builder-ui textarea {
@@ -1130,9 +614,9 @@ body.controlpanel .is-content-view.mobile {
   letter-spacing: 1px;
   height: 43px;
   line-height: 1.7;
-  color: #4a4a4a;
+  color: var(--cb-text);
   border: none;
-  background-color: #f6f6f6;
+  background-color: var(--cb-fill);
   width: auto;
   display: inline-block;
   background-image: none;
@@ -1148,6 +632,7 @@ body.controlpanel .is-content-view.mobile {
 }
 .builder-ui input[type=text]:focus,
 .builder-ui input[type=number]:focus,
+.builder-ui input[type=datetime-local]:focus,
 .builder-ui textarea:focus,
 .builder-ui select:focus,
 .builder-ui div[contenteditable=true]:focus {
@@ -1156,7 +641,7 @@ body.controlpanel .is-content-view.mobile {
   box-shadow: none;
 }
 .builder-ui .group {
-  border: 1px solid #e1e1e1;
+  border: 1px solid var(--cb-line);
   margin-bottom: 11px;
   border-radius: 7px;
   overflow: hidden;
@@ -1165,22 +650,54 @@ body.controlpanel .is-content-view.mobile {
   padding: 2px;
   box-sizing: border-box;
 }
-.builder-ui .div-target {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 6px;
+.builder-ui .group:has(> button:nth-child(6)):not(:has(> button:nth-child(7))) {
+  max-width: 133px;
+  margin-right: 7px;
 }
-.builder-ui .div-target button {
-  width: 40px;
-  height: 28px;
+.builder-ui .group:has(> button:nth-child(7)):not(:has(> button:nth-child(9))) {
+  width: 175px;
+  margin-right: 7px;
 }
-.builder-ui .div-target button[data-device=xs] svg {
+.builder-ui .group:has(> button:nth-child(9)):not(:has(> button:nth-child(11))) {
+  max-width: 216px;
+}
+.builder-ui .group.single {
+  border-color: transparent;
+  padding: 0;
+}
+.builder-ui .group.single > button {
+  margin: 0;
+  height: 38px;
+  background-color: var(--cb-fill);
+}
+.builder-ui .group.single > button:hover {
+  background-color: var(--cb-fill-hover);
+}
+.builder-ui button.btn-single {
+  height: 38px;
+  background-color: var(--cb-fill);
+}
+.builder-ui button.btn-single:hover {
+  background-color: var(--cb-fill-hover);
+}
+.builder-ui .div-target {
+  display: flex;
+  gap: 4px;
+  justify-content: flex-end;
+  margin-top: 6px;
+}
+.builder-ui .div-target button {
+  width: 31px;
+  height: 28px;
+  margin: 0;
+}
+.builder-ui .div-target button[data-device=xs] svg {
   width: 13px;
   height: 13px;
 }
 .builder-ui .accordion-item {
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: var(--cb-fill);
   justify-content: space-between;
   padding-left: 25px;
   height: 45px;
@@ -1228,79 +745,84 @@ body.controlpanel .is-content-view.mobile {
   transition: max-height 0.2s ease-out, opacity 0.1s ease-out;
 }
 .builder-ui .custom-select {
-  --cs-height: 46px;
-  --cs-border: 1px solid #ddd;
-  --cs-background: #fff;
-  --cs-hover-background: #f2f2f2;
-  --cs-selected-background: #eee;
+  --cs-height: 44px;
   position: relative;
   display: inline-block;
-  font-size: 15px;
+  width: 100%;
   height: var(--cs-height);
+  font-size: 14px;
 }
 .builder-ui .custom-select .select-styled {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 6px 0 6px;
-  border: var(--cs-border);
+  gap: 8px;
+  height: var(--cs-height);
+  padding: 0 10px 0 14px;
+  box-sizing: border-box;
+  border: 1px solid var(--cb-line-3);
+  border-radius: 7px;
+  background: var(--cb-field-bg);
+  color: var(--cb-text);
   cursor: pointer;
-  position: relative;
   user-select: none;
-  box-sizing: border-box;
-  height: var(--cs-height);
   overflow: hidden;
-  border-radius: 3px;
-  box-shadow: none;
+  transition: background 0.15s ease, border-color 0.15s ease;
   outline: none;
 }
-.builder-ui .custom-select .select-styled span {
-  display: flex;
-}
-.builder-ui .custom-select .select-styled span img {
-  height: 25px;
-  margin-top: 3px;
-}
-.builder-ui .custom-select .select-styled:focus-visible {
-  outline: var(--focus-outline-color) 2px solid;
-  outline-offset: -1px;
+.builder-ui .custom-select .select-styled:hover {
+  background: var(--cb-fill-hover);
 }
 .builder-ui .custom-select .select-styled > span:first-child {
-  position: absolute;
-  margin-right: 23px;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.builder-ui .custom-select .select-styled > span:first-child img {
+  height: 24px;
+  vertical-align: middle;
 }
 .builder-ui .custom-select .select-styled > span:nth-child(2) {
-  position: absolute;
-  height: 15px;
-  top: calc(50% - 7.5px);
-  right: 6px;
+  flex: none;
   display: flex;
+  align-items: center;
+  color: var(--cb-text-3);
+  transition: transform 0.2s ease;
 }
 .builder-ui .custom-select .select-styled svg {
-  width: 15px;
-  height: 15px;
+  width: 16px;
+  height: 16px;
+}
+.builder-ui .custom-select .select-styled:focus-visible {
+  outline: var(--cb-field-focus-outline);
+  outline-offset: -1px;
 }
 .builder-ui .custom-select .select-styled[aria-expanded=true] > span:nth-child(2) {
-  -webkit-transform: rotate(-180deg);
   transform: rotate(-180deg);
-  top: calc(50% - 7.5px);
 }
 .builder-ui .custom-select input {
   display: none;
+  position: absolute;
+  top: calc(var(--cs-height) + 6px);
+  left: 0;
   width: 100%;
-  height: 40px;
-  border: var(--cs-border);
-  border-top: none;
-  padding: 0 3px 0 8px;
+  height: 38px;
   box-sizing: border-box;
   margin: 0;
-  position: absolute;
-  top: var(--cs-height);
-  left: 0;
-  font-size: 15px;
+  padding: 0 12px;
   z-index: 2;
-  outline-offset: 0;
-  background: var(--cs-background);
+  font-size: 14px;
+  color: var(--cb-text);
+  background: var(--cb-surface);
+  border: 1px solid var(--cb-line-3);
+  border-bottom: none;
+  border-radius: 7px 7px 0 0;
+  outline: none;
+}
+.builder-ui .custom-select input::placeholder {
+  color: var(--cb-text-3);
 }
 .builder-ui .custom-select input:focus {
   outline: none;
@@ -1308,46 +830,76 @@ body.controlpanel .is-content-view.mobile {
 .builder-ui .custom-select .select-options {
   display: none;
   position: absolute;
-  top: calc(var(--cs-height) + 1px);
+  top: calc(var(--cs-height) + 6px);
   left: 0;
-  border: var(--cs-border);
+  width: 100%;
   box-sizing: border-box;
-  border-top: none;
-  z-index: 1;
-  list-style: none;
   margin: 0;
-  padding: 0;
-  width: 100%;
-  background-color: var(--cs-background);
+  padding: 5px;
   z-index: 1;
-  max-height: 200px;
+  list-style: none;
+  max-height: 240px;
   overflow-y: auto;
+  background: var(--cb-surface);
+  border: 1px solid var(--cb-line-3);
+  border-radius: 8px;
+  box-shadow: var(--cb-shadow-2);
 }
 .builder-ui .custom-select.has-search .select-options {
-  top: calc(var(--cs-height) + 40px);
+  top: calc(var(--cs-height) + 44px);
+  padding-top: 0;
+  border-top: none;
+  border-radius: 0 0 8px 8px;
 }
 .builder-ui .custom-select .select-options.active {
   display: block;
 }
 .builder-ui .custom-select .select-options li {
-  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  min-height: 34px;
+  padding: 0 10px;
+  border-radius: 5px;
+  color: var(--cb-text);
   cursor: pointer;
   white-space: nowrap;
-  min-height: 36px;
-  align-items: center;
 }
 .builder-ui .custom-select .select-options li img {
-  margin: 8px 0;
-  height: 25px;
+  margin: 6px 0;
+  height: 24px;
 }
 .builder-ui .custom-select .select-options li:hover {
-  background-color: var(--cs-hover-background);
+  background: var(--cb-fill);
 }
-.builder-ui .custom-select .select-options li.selected {
-  background-color: var(--cs-selected-background);
+.builder-ui .custom-select .select-options li.selected,
+.builder-ui .custom-select .select-options li[aria-selected=true] {
+  background: var(--cb-fill-active);
 }
 .builder-ui .inp-heading .select-options li {
-  padding: 3px 8px;
+  padding: 3px 10px;
+}
+.builder-ui .snippet-cathead {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+}
+.builder-ui .inp-snippets.custom-select {
+  width: 100%;
+}
+.builder-ui .inp-snippets.custom-select .select-styled {
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--cb-line);
+  border-radius: 0;
+  padding: 0 10px 0 16px;
+}
+.builder-ui .inp-snippets.custom-select .select-styled:hover {
+  background: var(--cb-fill);
+}
+.builder-ui .inp-snippets.custom-select .select-options {
+  max-height: 320px;
 }
 .builder-ui .scroll-darker * {
   scrollbar-width: thin;
@@ -1363,6 +915,10 @@ body.controlpanel .is-content-view.mobile {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
+[data-cb-ui] .custom-select {
+  background: var(--cb-surface);
+}
+
 /* /UI */
 /* CONTROL PANEL */
 body.controlpanel .builder-ui .is-controlpanel {
@@ -1529,9 +1085,63 @@ body.controlpanel .is-wrapper {
 .builder-ui .is-controlpanel [class^=panel-].active {
   display: flex;
 }
-.builder-ui .is-controlpanel [class^=panel-].panel-section .submain, .builder-ui .is-controlpanel [class^=panel-].panel-box .submain {
+.builder-ui .is-controlpanel [class^=panel-].panel-code .submain {
+  padding: 14px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-text .submain {
+  padding: 14px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-button .submain {
+  padding: 14px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-image .submain {
+  padding: 14px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-video .submain {
+  padding: 14px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-icon .submain {
+  padding: 14px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-svg .submain {
+  padding: 7px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-audio .submain {
+  padding: 16px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-iframe .submain {
+  padding: 14px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-spacer .submain {
+  padding: 0 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-plugin .submain {
+  padding: 15px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-overlay .submain {
+  padding: 14px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-column .submain {
+  padding: 9px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-row .submain {
+  padding: 9px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-container .submain {
+  padding: 14px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-block .submain {
+  padding: 14px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-box .submain {
   padding: 0 24px 20px;
 }
+.builder-ui .is-controlpanel [class^=panel-].panel-section .submain {
+  padding: 14px 24px 20px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-section .submain {
+  padding: 14px 24px 20px;
+}
 .builder-ui .is-controlpanel [class^=panel-] .submain {
   padding: 0 24px 16px;
 }
@@ -1588,6 +1198,7 @@ body.controlpanel .is-wrapper {
   justify-content: center;
 }
 .builder-ui .is-controlpanel .panel-image .asset-preview img,
+.builder-ui .is-controlpanel .panel-overlay .asset-preview img,
 .builder-ui .is-controlpanel .panel-box .asset-preview img,
 .builder-ui .is-controlpanel .panel-block .asset-preview img,
 .builder-ui .is-controlpanel .panel-column .asset-preview img,
@@ -1595,6 +1206,223 @@ body.controlpanel .is-wrapper {
   max-width: 130px;
   max-height: 130px;
 }
+.builder-ui .is-controlpanel .panel-overlay .inp-text {
+  box-sizing: border-box;
+  width: 222px;
+  min-height: 62px;
+  max-height: 220px;
+  overflow-y: auto;
+  padding: 10px 8px;
+  font-family: sans-serif;
+  font-size: 15px;
+  letter-spacing: 1px;
+  line-height: 1.4;
+  border-radius: 5px;
+  background-color: #f6f6f6;
+  color: #121212;
+  outline: none;
+}
+.builder-ui .is-controlpanel .panel-overlay .inp-text p {
+  margin: 0;
+}
+.builder-ui .is-controlpanel .panel-overlay .label-note {
+  width: 222px;
+  font-size: 12px;
+  line-height: 1.5;
+  opacity: 0.6;
+}
+.builder-ui .is-controlpanel .panel-overlay .div-overlay-image.stacked {
+  margin-top: 22px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  padding-top: 16px;
+}
+.builder-ui .is-controlpanel .panel-overlay .div-overlay-list {
+  margin-top: 22px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  padding-top: 14px;
+}
+.builder-ui .is-controlpanel .panel-overlay .div-overlay-list .list-caption {
+  margin-bottom: 8px;
+}
+.builder-ui .is-controlpanel .panel-overlay .overlay-list {
+  width: 222px;
+  max-height: 260px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.builder-ui .is-controlpanel .panel-overlay .ovl-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  min-height: 34px;
+  box-sizing: border-box;
+  padding: 5px 8px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+.builder-ui .is-controlpanel .panel-overlay .ovl-row:hover {
+  background-color: #f0f0f0;
+}
+.builder-ui .is-controlpanel .panel-overlay .ovl-row.on {
+  background-color: #e6e6e6;
+}
+.builder-ui .is-controlpanel .panel-overlay .ovl-row-thumb {
+  flex: none;
+  width: 30px;
+  height: 24px;
+  border-radius: 3px;
+  background-color: #e2e2e2;
+  background-size: cover;
+  background-position: center;
+}
+.builder-ui .is-controlpanel .panel-overlay .ovl-row-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.35;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #4b4b4b;
+}
+.builder-ui .is-controlpanel .panel-button .label-note {
+  width: 222px;
+  font-size: 12px;
+  line-height: 1.5;
+  opacity: 0.6;
+}
+.builder-ui .is-controlpanel .panel-button .buttonsize button,
+.builder-ui .is-controlpanel .panel-button .borderstyle button,
+.builder-ui .is-controlpanel .panel-button .buttonwidth button {
+  width: auto;
+  min-width: 52px;
+  padding: 0 12px;
+  font-size: 13px;
+}
+.builder-ui .is-controlpanel .panel-button .presettabs button,
+.builder-ui .is-controlpanel .panel-button .colorstate button {
+  flex: 1 1 0;
+  width: auto;
+  min-width: 0;
+  padding: 0 12px;
+  font-size: 13px;
+}
+.builder-ui .is-controlpanel .panel-button .buttonradius,
+.builder-ui .is-controlpanel .panel-button .fontsizes,
+.builder-ui .is-controlpanel .panel-button .letterspacing {
+  display: grid;
+  gap: 4px;
+}
+.builder-ui .is-controlpanel .panel-button .buttonradius button,
+.builder-ui .is-controlpanel .panel-button .fontsizes button,
+.builder-ui .is-controlpanel .panel-button .letterspacing button {
+  width: auto;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  font-size: 12px;
+}
+.builder-ui .is-controlpanel .panel-button .buttonradius {
+  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
+}
+.builder-ui .is-controlpanel .panel-button .letterspacing {
+  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+}
+.builder-ui .is-controlpanel .panel-button .fontsizes {
+  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
+}
+.builder-ui .is-controlpanel .panel-button .presettabs,
+.builder-ui .is-controlpanel .panel-button .colorstate,
+.builder-ui .is-controlpanel .panel-button .buttonradius,
+.builder-ui .is-controlpanel .panel-button .fontsizes,
+.builder-ui .is-controlpanel .panel-button .letterspacing {
+  width: 222px;
+}
+.builder-ui .is-controlpanel .panel-button .padx,
+.builder-ui .is-controlpanel .panel-button .pady {
+  margin-bottom: 4px;
+}
+.builder-ui .is-controlpanel .panel-button .btn-wide {
+  width: 222px;
+  height: 36px;
+  margin: 8px 0 0 2px;
+  border: 1px solid #e1e1e1;
+  font-size: 13px;
+}
+.builder-ui .is-controlpanel .panel-button .button-presets,
+.builder-ui .is-controlpanel .panel-button .button-saved {
+  width: 222px;
+  max-height: 232px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 4px 2px;
+  box-sizing: border-box;
+}
+.builder-ui .is-controlpanel .panel-button .preset-swatch {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  padding: 4px;
+  margin: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font: inherit;
+  overflow: hidden;
+}
+.builder-ui .is-controlpanel .panel-button .preset-swatch > span:first-child {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.builder-ui .is-controlpanel .panel-button .preset-swatch:hover {
+  border-color: #d1d1d1;
+  background-color: transparent !important;
+}
+.builder-ui .is-controlpanel .panel-button .preset-remove {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.55);
+}
+.builder-ui .is-controlpanel .panel-button .preset-remove svg {
+  width: 11px;
+  height: 11px;
+  stroke: #fff;
+  color: #fff;
+}
+.builder-ui .is-controlpanel .panel-button .preset-swatch:hover .preset-remove {
+  display: flex;
+}
+.builder-ui .is-controlpanel .panel-button .margin-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px 12px;
+  width: 222px;
+}
+.builder-ui .is-controlpanel .panel-button .margin-grid .label {
+  margin: 0;
+}
+.builder-ui .is-controlpanel .panel-button .margin-grid input {
+  width: 100%;
+  box-sizing: border-box;
+}
 .builder-ui .is-controlpanel .panel-audio .asset-preview,
 .builder-ui .is-controlpanel .panel-iframe .asset-preview {
   width: 100%;
@@ -1622,6 +1450,21 @@ body.controlpanel .is-wrapper {
 .builder-ui .is-controlpanel .group.removecontent button {
   width: 100%;
 }
+.builder-ui .is-controlpanel .group.desktopwidth {
+  width: 222px;
+}
+.builder-ui .is-controlpanel .group.desktopwidth button {
+  width: 39px;
+  font-size: 11px;
+}
+.builder-ui .is-controlpanel .group.desktopwidth button.inert {
+  color: var(--cb-text-4);
+  background-color: transparent !important;
+  cursor: default;
+}
+.builder-ui .is-controlpanel .group.desktopwidth button.inert:hover {
+  background-color: transparent !important;
+}
 .builder-ui .is-controlpanel .group.contentsize {
   width: 222px;
 }
@@ -1647,25 +1490,18 @@ body.controlpanel .is-wrapper {
   width: 100%;
 }
 .builder-ui .is-controlpanel .group.editmodule {
+  /* For module as box overlay */
   width: 222px;
   margin-top: 8px;
 }
 .builder-ui .is-controlpanel .group.editmodule button {
   width: 100%;
   height: 39px;
-  background: rgb(135, 116, 215);
-  color: #fff;
 }
-.builder-ui .is-controlpanel .group.editmodule button svg {
-  fill: #fff;
-}
-.builder-ui .is-controlpanel .group.editmodule button:hover {
-  background: rgb(135, 116, 215);
-}
-.builder-ui .is-controlpanel .group.editspacing, .builder-ui .is-controlpanel .group.moreoptions, .builder-ui .is-controlpanel .group.resetrotation {
+.builder-ui .is-controlpanel .group.moreoptions, .builder-ui .is-controlpanel .group.resetrotation {
   width: 222px;
 }
-.builder-ui .is-controlpanel .group.editspacing button, .builder-ui .is-controlpanel .group.moreoptions button, .builder-ui .is-controlpanel .group.resetrotation button {
+.builder-ui .is-controlpanel .group.moreoptions button, .builder-ui .is-controlpanel .group.resetrotation button {
   width: 100%;
 }
 .builder-ui .is-controlpanel .group.contentspacing {
@@ -1758,15 +1594,6 @@ body.controlpanel .is-wrapper {
   width: 50px;
   transition: all 0.15s ease;
 }
-.builder-ui .is-controlpanel .group.imageeffect button.active, .builder-ui .is-controlpanel .group.aspectratio button.active, .builder-ui .is-controlpanel .group.duration button.active, .builder-ui .is-controlpanel .group.topspacing button.active {
-  background-color: rgb(233, 233, 233);
-}
-.builder-ui .is-controlpanel .group.imageeffect button.active:hover, .builder-ui .is-controlpanel .group.aspectratio button.active:hover, .builder-ui .is-controlpanel .group.duration button.active:hover, .builder-ui .is-controlpanel .group.topspacing button.active:hover {
-  background-color: rgb(235, 235, 235);
-}
-.builder-ui .is-controlpanel .group.imageeffect button:hover, .builder-ui .is-controlpanel .group.aspectratio button:hover, .builder-ui .is-controlpanel .group.duration button:hover, .builder-ui .is-controlpanel .group.topspacing button:hover {
-  background-color: rgb(243, 244, 246);
-}
 .builder-ui .is-controlpanel .group.imageeffect button {
   width: 105px;
 }
@@ -1780,15 +1607,6 @@ body.controlpanel .is-wrapper {
   width: 36px;
   transition: all 0.15s ease;
 }
-.builder-ui .is-controlpanel button.toggle.active {
-  background-color: rgb(233, 233, 233);
-}
-.builder-ui .is-controlpanel button.toggle.active:hover {
-  background-color: rgb(235, 235, 235);
-}
-.builder-ui .is-controlpanel button.toggle:hover {
-  background-color: rgb(243, 244, 246);
-}
 .builder-ui .is-controlpanel .label.changedevice {
   display: flex;
   flex-direction: row;
@@ -1839,6 +1657,17 @@ body.controlpanel .is-wrapper {
   width: 22px;
   height: 22px;
 }
+.builder-ui .is-controlpanel .panel-dialog.symbols {
+  flex-direction: column;
+  overflow: hidden;
+}
+.builder-ui .is-controlpanel .panel-dialog.symbols button.btn-back {
+  flex: 0 0 auto;
+}
+.builder-ui .is-controlpanel .panel-dialog.symbols .cb-symbols-host {
+  flex: 1 1 auto;
+  min-height: 0;
+}
 .builder-ui .is-controlpanel .panel-dialog.icons input {
   outline-offset: -2px;
 }
@@ -2236,23 +2065,35 @@ body.frame-center #editPanel {
   justify-content: center !important;
 }
 
-body.frame-center .is-content-view {
-  margin-top: 25px !important;
-  transform-origin: center !important;
-}
-
-body.frame-center.controlpanel .is-content-view {
-  margin-top: 25px !important;
-  transform-origin: center !important;
+/* The scaled canvas, out of flow.
+ *
+ * transform: scale() never shrinks the layout box, so a canvas left in the flex flow
+ * reserves its unscaled height and the workspace scrolls even when the canvas visibly
+ * fits. Absolute positioning takes it out of the reckoning; iframepanel.applyCanvasScale
+ * computes where it goes. Same shape as the scaled-fullview rule further down.
+ *
+ * Placed after body.frame-center on purpose: that rule sets margin-top and
+ * transform-origin with !important at the same specificity, so source order is what
+ * settles it. Moving this block above it silently restores centre-origin scaling.
+ */
+body.canvas-scaled .is-content-view {
+  position: absolute !important;
+  top: var(--view-top) !important;
+  left: var(--view-left) !important;
+  margin: 0 !important;
+  width: var(--view-width) !important;
+  height: var(--view-height) !important;
+  transform: scale(var(--view-scale)) !important;
+  transform-origin: top left !important;
 }
 
 /* /CONTROL PANEL */
 /* THEME */
 #_cbhtml .is-side button:hover, .is-ui .is-side button:hover {
-  background-color: rgb(237, 237, 237) !important;
+  background-color: var(--cb-fill-hover) !important;
 }
 #_cbhtml .is-side button.on, .is-ui .is-side button.on {
-  background-color: rgb(237, 237, 237) !important;
+  background-color: var(--cb-fill-active) !important;
 }
 
 .colored #_cbhtml .is-responsive-toolbar, .colored .is-ui .is-responsive-toolbar,
@@ -2285,30 +2126,22 @@ body.frame-center.controlpanel .is-content-view {
 }
 
 .dark #_cbhtml .is-side, .dark .is-ui .is-side {
-  color: #d3d3d3 !important;
+  color: var(--cb-text) !important;
   background: #181818 !important;
 }
 .dark #_cbhtml .is-side button, .dark .is-ui .is-side button {
-  color: #d3d3d3 !important;
+  color: var(--cb-text) !important;
   background: transparent !important;
 }
-.dark #_cbhtml .is-side button:hover, .dark .is-ui .is-side button:hover {
-  background-color: rgb(69, 69, 69) !important;
-}
-.dark #_cbhtml .is-side button.on, .dark .is-ui .is-side button.on {
-  background-color: rgb(69, 69, 69) !important;
-}
-.dark #_cbhtml .is-side input[type=text], .dark #_cbhtml .is-side input[type=number], .dark #_cbhtml .is-side textarea, .dark .is-ui .is-side input[type=text], .dark .is-ui .is-side input[type=number], .dark .is-ui .is-side textarea {
-  color: #c7c7c7 !important;
-  background-color: #313131 !important;
+.dark #_cbhtml .is-side input[type=text], .dark #_cbhtml .is-side input[type=number], .dark #_cbhtml .is-side textarea,
+.dark #_cbhtml .is-side select, .dark .is-ui .is-side input[type=text], .dark .is-ui .is-side input[type=number], .dark .is-ui .is-side textarea,
+.dark .is-ui .is-side select {
+  color: var(--cb-text) !important;
+  background-color: var(--cb-fill) !important;
 }
 .dark #_cbhtml .is-side input[type=checkbox], .dark .is-ui .is-side input[type=checkbox] {
   opacity: 0.7 !important;
 }
-.dark #_cbhtml .is-side select, .dark .is-ui .is-side select {
-  color: #c7c7c7 !important;
-  background-color: #313131 !important;
-}
 .dark #_cbhtml .is-sidebar.is-area, .dark .is-ui .is-sidebar.is-area {
   background: #181818 !important;
 }
@@ -2339,36 +2172,12 @@ body.frame-center.controlpanel .is-content-view {
 .dark .is-content-view iframe {
   opacity: 0.97;
 }
-.dark .builder-ui {
-  color: #d3d3d3;
-}
-.dark .builder-ui a {
-  color: #d3d3d3;
-}
-.dark .builder-ui svg {
-  fill: #d3d3d3;
-}
 .dark .builder-ui .part-breadcrumb svg {
   width: 17px;
   height: 17px;
 }
-.dark .builder-ui button {
-  color: #d3d3d3;
-}
-.dark .builder-ui button svg {
-  color: #fff;
-}
 .dark .builder-ui button.is-btn-color {
-  border: 1px solid transparent;
-}
-.dark .builder-ui button:not(.is-btn-color).on {
-  background-color: rgb(69, 69, 69);
-}
-.dark .builder-ui button:not(.is-btn-color).on:hover {
-  background-color: rgb(64, 64, 64);
-}
-.dark .builder-ui button:not(.is-btn-color):hover {
-  background-color: rgb(59, 59, 59);
+  border: 1px solid rgba(255, 255, 255, 0.3215686275);
 }
 .dark .builder-ui .panel-plugin .is-accordion > div {
   border: 1px solid #6e6e6e;
@@ -2387,26 +2196,9 @@ body.frame-center.controlpanel .is-content-view {
 .dark .builder-ui .panel-plugin button {
   background-color: rgb(64, 64, 64);
 }
-.dark .builder-ui .label {
-  color: #d3d3d3;
-}
-.dark .builder-ui input[type=text], .dark .builder-ui input[type=number], .dark .builder-ui textarea {
-  color: #c7c7c7;
-  background-color: #313131;
-}
 .dark .builder-ui input[type=checkbox] {
   opacity: 0.7;
 }
-.dark .builder-ui select {
-  color: #c7c7c7;
-  background-color: #313131;
-}
-.dark .builder-ui .group {
-  border: 1px solid #444;
-}
-.dark .builder-ui .accordion-item {
-  background-color: #353535;
-}
 .dark .builder-ui .is-controlpanel {
   background-color: rgb(24, 24, 24);
 }
@@ -2423,45 +2215,7 @@ body.frame-center.controlpanel .is-content-view {
 .dark .builder-ui .is-controlpanel .panel-dialog.blocks .div-blocks > div {
   outline: #d5d5d5 1px solid;
 }
-.dark .builder-ui .is-controlpanel .group.imageeffect button.active, .dark .builder-ui .is-controlpanel .group.aspectratio button.active, .dark .builder-ui .is-controlpanel .group.duration button.active, .dark .builder-ui .is-controlpanel .group.topspacing button.active {
-  background-color: rgb(69, 69, 69);
-}
-.dark .builder-ui .is-controlpanel .group.imageeffect button.active:hover, .dark .builder-ui .is-controlpanel .group.aspectratio button.active:hover, .dark .builder-ui .is-controlpanel .group.duration button.active:hover, .dark .builder-ui .is-controlpanel .group.topspacing button.active:hover {
-  background-color: rgb(64, 64, 64);
-}
-.dark .builder-ui .is-controlpanel .group.imageeffect button:hover, .dark .builder-ui .is-controlpanel .group.aspectratio button:hover, .dark .builder-ui .is-controlpanel .group.duration button:hover, .dark .builder-ui .is-controlpanel .group.topspacing button:hover {
-  background-color: rgb(59, 59, 59);
-}
-.dark .builder-ui .is-controlpanel .group button.toggle {
-  width: 36px;
-  transition: all 0.15s ease;
-}
-.dark .builder-ui .is-controlpanel .group button.toggle.active {
-  background-color: rgb(69, 69, 69);
-}
-.dark .builder-ui .is-controlpanel .group button.toggle.active:hover {
-  background-color: rgb(64, 64, 64);
-}
-.dark .builder-ui .is-controlpanel .group button.toggle:hover {
-  background-color: rgb(59, 59, 59);
-}
-.dark .builder-ui .custom-select {
-  --cs-height: 46px;
-  --cs-border: 1px solid #5e5e5e;
-  --cs-background: #323232;
-  --cs-hover-background: #484848;
-  --cs-selected-background: #484848;
-}
-.dark .builder-ui .custom-select .select-styled span {
-  color: #fff;
-}
-.dark .builder-ui .custom-select .select-styled span img {
-  filter: invert(1);
-  opacity: 0.7;
-}
-.dark .builder-ui .custom-select .select-options li {
-  color: #fff;
-}
+.dark .builder-ui .custom-select .select-styled span img,
 .dark .builder-ui .custom-select .select-options li img {
   filter: invert(1);
   opacity: 0.7;
@@ -2490,7 +2244,7 @@ body.frame-center.controlpanel .is-content-view {
   left: calc(50% - 80px);
   right: auto;
   box-sizing: border-box;
-  line-height: 30px;
+  line-height: 28px;
   outline: none;
   text-align: center;
   cursor: pointer;
@@ -2500,11 +2254,14 @@ body.frame-center.controlpanel .is-content-view {
   overflow: hidden;
 }
 .is-box-tool button {
-  width: 35px !important;
-  height: 35px !important;
+  width: 32px !important;
+  height: 32px !important;
   cursor: pointer;
 }
 .is-box-tool button svg {
+  width: 15px;
+  height: 15px;
+  flex: none;
   fill: #fff !important;
 }
 .is-box-tool button.is-box-edit {
@@ -2522,7 +2279,7 @@ body.frame-center.controlpanel .is-content-view {
   top: calc(17% - 14px);
   right: 0px;
   left: auto;
-  width: 35px;
+  width: 32px;
   height: auto;
   font-size: 13px;
   flex-direction: column;
@@ -2531,10 +2288,10 @@ body.frame-center.controlpanel .is-content-view {
   overflow: hidden;
 }
 .is-section-tool > button {
-  width: 35px;
-  height: 35px;
+  width: 32px;
+  height: 32px;
   border-radius: 0;
-  line-height: 35px;
+  line-height: 32px;
   padding: 0px;
   font-size: 13px;
   cursor: pointer;
@@ -2551,8 +2308,8 @@ body.frame-center.controlpanel .is-content-view {
   background: rgb(247, 99, 46);
 }
 .is-section-tool > button svg {
-  width: 16px;
-  height: 16px;
+  width: 15px;
+  height: 15px;
   flex: none;
 }
 .is-section-tool > button.btn-move-section-up *, .is-section-tool > button.btn-move-section-down * {
@@ -2683,7 +2440,7 @@ body.frame-center.controlpanel .is-content-view {
   width: 100%;
   height: 40px;
   position: absolute;
-  padding: 0 0 0 60px;
+  padding: 0;
   box-sizing: border-box;
 }
 
@@ -2792,6 +2549,7 @@ body.frame-center.controlpanel .is-content-view {
 #divSelector .inp-typolist.custom-select .select-styled {
   outline-offset: -2px;
   border: none;
+  border-radius: 0;
 }
 #divSelector .inp-typolist.custom-select .select-options {
   max-height: 330px;
@@ -3377,6 +3135,48 @@ body.fullview.topspace .is-content-view iframe {
   height: 100%;
 }
 
+/* Scaled fullview.
+   On a display too narrow to show a desktop viewport 1:1, fullview renders a fixed
+   logical width scaled down to fit — the same approach as .desktop / .desktop-lg —
+   so the iframe viewport stays in the desktop breakpoint band. The custom properties
+   are set from IframePanel.applyFullviewScale().
+
+   The canvas is taken out of the flex flow and anchored with position/top/left, with
+   transform-origin at top left. The layout box is deliberately larger than #editPanel
+   (the transform is what makes it fit), and both of the panel's centering mechanisms —
+   justify-content:center from body.frame-center and transform-origin:center — position
+   an overflowing box relative to its own size, which would make the visible geometry a
+   function of the height being computed. Anchoring makes it deterministic: the scaled
+   canvas occupies exactly 0..availableWidth by topOffset..panelHeight.
+
+   Selectors carry four classes so they outrank the transform:scale(1) /
+   height:100vh !important fullview rules above, the media-query transform ladder, and
+   the transform-origin:center !important from body.frame-center. */
+body.fullview.fullview-scaled .is-content-view,
+body.fullview.fullview-scaled.controlpanel .is-content-view,
+body.fullview.fullview-scaled.topspace .is-content-view,
+body.fullview.fullview-scaled.controlpanel.topspace .is-content-view {
+  position: absolute !important;
+  top: var(--fullview-top) !important;
+  left: 0 !important;
+  margin-top: 0 !important;
+  width: var(--fullview-width) !important;
+  height: var(--fullview-height) !important;
+  transform: scale(var(--fullview-scale)) !important;
+  transform-origin: top left !important;
+}
+
+/* Unpin the iframe from the 100vh-based heights so it fills the logical canvas. */
+body.fullview.fullview-scaled .is-content-view.fullview > div.iframe-wrapper,
+body.fullview.fullview-scaled .is-content-view.fullview iframe {
+  height: 100% !important;
+}
+
+/* Manual width dragging would break the logical-width invariant. */
+body.fullview.fullview-scaled .is-content-view > div.iframe-resizer {
+  display: none !important;
+}
+
 /* Iframe Resizer */
 .is-content-view > div.iframe-resizer {
   position: absolute !important;
@@ -4544,3 +4344,744 @@ body.fullview.topspace .is-content-view iframe {
 }
 
 /* /content.css */
+/* ── Code Chat (codechat.js) ──────────────────────────────────────────────
+   Self-contained port of the AI Code Chat panel + Settings dialog. ContentBox
+   has its own design system (no shared .cb-* kit / cb-scrollbar mixin), so this
+   styles everything directly from the tokens ContentBox does define. Token-driven
+   so both themes flip with no body.dark duplicates. Mirrors the ContentBuilder
+   #chatPanel/#settingsDialog block; keep the two in step. */
+#chatPanel .sr-only, #settingsDialog .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+#chatPanel {
+  position: fixed;
+  bottom: 40px;
+  right: 40px;
+  width: 500px;
+  height: 600px;
+  background: var(--cb-surface);
+  color: var(--cb-text);
+  border: 1px solid var(--cb-line);
+  border-radius: 12px;
+  box-shadow: var(--cb-shadow-2);
+  display: flex;
+  flex-direction: column;
+  z-index: 10004;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+#chatPanel.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#chatPanel *:focus-visible {
+  outline: 2px solid var(--cb-accent, #3e93f7);
+  outline-offset: 2px;
+}
+
+#chatPanel .chat-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--cb-line);
+  border-radius: 12px 12px 0 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+#chatPanel .chat-header-content {
+  flex: 1;
+}
+
+#chatPanel .chat-header h1 {
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0;
+  margin: 0 0 2px;
+  pointer-events: none;
+}
+
+#chatPanel .chat-header p {
+  font-size: 12px;
+  opacity: 0.7;
+  margin: 0;
+  pointer-events: none;
+}
+
+#chatPanel .header-actions {
+  display: flex;
+  gap: 4px;
+}
+
+#chatPanel .close-button, #chatPanel .settings-button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.2s;
+  color: var(--cb-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+}
+
+#chatPanel .close-button:hover, #chatPanel .settings-button:hover,
+#chatPanel .close-button:focus-visible, #chatPanel .settings-button:focus-visible {
+  background: var(--cb-fill-hover);
+}
+
+#chatPanel .messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 0;
+}
+
+#chatPanel .messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+#chatPanel .messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#chatPanel .messages::-webkit-scrollbar-thumb {
+  background: var(--cb-line);
+  border-radius: 3px;
+}
+
+#chatPanel .messages::-webkit-scrollbar-thumb:hover {
+  background: var(--cb-text-3);
+}
+
+#chatPanel .message {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+#chatPanel .message-header {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--cb-text-2);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+#chatPanel .message-content {
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.6;
+  position: relative;
+}
+
+#chatPanel .message.user .message-content {
+  background: var(--cb-fill);
+  color: var(--cb-text);
+}
+
+#chatPanel .message.assistant .message-content {
+  background: var(--cb-chat-bubble-bg);
+  color: var(--cb-chat-bubble-text);
+}
+
+#chatPanel .message.assistant .message-content.streaming::after {
+  content: "▊";
+  animation: blink 1s infinite;
+  margin-left: 2px;
+}
+
+#chatPanel .message.assistant .message-content h1,
+#chatPanel .message.assistant .message-content h2,
+#chatPanel .message.assistant .message-content h3 {
+  margin-top: 16px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+#chatPanel .message.assistant .message-content h1 {
+  font-size: 18px;
+}
+
+#chatPanel .message.assistant .message-content h2 {
+  font-size: 16px;
+}
+
+#chatPanel .message.assistant .message-content h3 {
+  font-size: 14px;
+}
+
+#chatPanel .message.assistant .message-content p {
+  margin: 8px 0;
+}
+
+#chatPanel .message.assistant .message-content ul,
+#chatPanel .message.assistant .message-content ol {
+  margin: 8px 0;
+  padding-left: 24px;
+}
+
+#chatPanel .message.assistant .message-content li {
+  margin: 4px 0;
+}
+
+#chatPanel .message.assistant .message-content code {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: "Monaco", "Menlo", monospace;
+  font-size: 13px;
+}
+
+#chatPanel .message.assistant .message-content pre {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+#chatPanel .message.assistant .message-content pre code {
+  background: transparent;
+  padding: 0;
+}
+
+#chatPanel .message.assistant .message-content blockquote {
+  border-left: 3px solid rgba(255, 255, 255, 0.3);
+  padding-left: 12px;
+  margin: 8px 0;
+  font-style: italic;
+  opacity: 0.9;
+}
+
+#chatPanel .message.assistant .message-content a {
+  color: #fff;
+  text-decoration: underline;
+}
+
+#chatPanel .message.assistant .message-content strong {
+  font-weight: 600;
+}
+
+#chatPanel .input-area {
+  padding: 16px 20px;
+  border-top: 1px solid var(--cb-line);
+  background: var(--cb-surface);
+  border-radius: 0 0 12px 12px;
+}
+
+#chatPanel .input-wrapper {
+  display: flex;
+  gap: 5px;
+  align-items: flex-end;
+}
+
+#chatPanel .input-area textarea {
+  flex: 1;
+  border-radius: 8px;
+  font-size: 14px;
+  font-family: system-ui;
+  line-height: 1.4;
+  letter-spacing: 0;
+  resize: none;
+  min-height: 58px;
+  max-height: 120px;
+  padding: 8px 10px;
+  box-sizing: border-box;
+  background: var(--cb-fill);
+  color: var(--cb-text);
+  border: 1px solid var(--cb-line);
+  transition: border-color 0.2s;
+}
+
+#chatPanel .input-area textarea::placeholder {
+  color: var(--cb-text-3);
+  opacity: 1;
+}
+
+#chatPanel .input-area textarea::-webkit-scrollbar {
+  width: 8px;
+}
+
+#chatPanel .input-area textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#chatPanel .input-area textarea::-webkit-scrollbar-thumb {
+  background: var(--cb-line);
+  border-radius: 3px;
+}
+
+#chatPanel .input-area button {
+  width: 48px;
+  height: 48px;
+  background: var(--cb-fill);
+  color: var(--cb-text);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+#chatPanel .input-area button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+#chatPanel .input-area button:hover:not(:disabled) {
+  background: var(--cb-fill-hover);
+}
+
+#chatPanel .loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: var(--cb-fill);
+  border-radius: 8px;
+  font-size: 14px;
+  color: var(--cb-text-2);
+}
+
+#chatPanel .spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--cb-line);
+  border-top-color: var(--cb-text);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+#chatPanel .error-message {
+  padding: 12px 16px;
+  background: var(--cb-danger-fill);
+  border: 1px solid var(--cb-danger);
+  border-radius: 8px;
+  color: var(--cb-danger);
+  font-size: 13px;
+  margin-top: 8px;
+}
+
+#chatPanel .task-indicator {
+  font-size: 11px;
+  color: var(--cb-text-2);
+  font-style: italic;
+  margin-top: 4px;
+  padding: 4px 8px;
+  background: var(--cb-surface-2);
+  border-radius: 4px;
+  display: inline-block;
+}
+
+#chatPanel .copy-button {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  background: var(--cb-fill);
+  border: none;
+  border-radius: 4px;
+  padding: 0 8px;
+  height: 20px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s, background 0.2s;
+  font-size: 11px;
+  color: inherit;
+}
+
+#chatPanel .message:hover .copy-button, #chatPanel .copy-button.copied {
+  opacity: 1;
+}
+
+#chatPanel .copy-button:hover {
+  background: var(--cb-fill-hover);
+}
+
+#chatPanel .quick-image-size-button {
+  width: 48px;
+  height: 48px;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cb-fill);
+  color: var(--cb-text);
+}
+
+#chatPanel .quick-image-size-button:hover:not(:disabled) {
+  background: var(--cb-fill-hover);
+}
+
+#chatPanel .quick-image-size-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+#chatPanel .image-size-popover {
+  position: absolute;
+  bottom: 72px;
+  right: 68px;
+  background: var(--cb-surface);
+  border: 1px solid var(--cb-line);
+  border-radius: 8px;
+  box-shadow: var(--cb-shadow-2);
+  z-index: 10006;
+  min-width: 160px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+#chatPanel .image-size-popover::-webkit-scrollbar {
+  width: 6px;
+}
+
+#chatPanel .image-size-popover::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#chatPanel .image-size-popover::-webkit-scrollbar-thumb {
+  background: var(--cb-line);
+  border-radius: 3px;
+}
+
+#chatPanel .size-options {
+  padding: 8px;
+}
+
+#chatPanel .size-option {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background 0.2s;
+  font-size: 14px;
+}
+
+#chatPanel .size-option label, #chatPanel .size-option input {
+  cursor: pointer;
+}
+
+#chatPanel .size-option input[type=radio] {
+  margin-right: 8px;
+}
+
+#chatPanel .size-option:hover {
+  background: var(--cb-fill-hover);
+}
+
+#chatPanel .size-option.selected {
+  background: var(--cb-accent-fill);
+  font-weight: 500;
+}
+
+/* Attachments (chat/attachments.js) — attach button sits in .input-wrapper, so its
+   size/background/hover come from the #chatPanel .input-area button rule; only icon centring here. */
+#chatPanel .attach-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+#chatPanel .attachment-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+#chatPanel .attachment-chips:empty {
+  display: none;
+}
+
+#chatPanel .attachment-chip {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 200px;
+  padding: 6px 8px;
+  background: var(--cb-fill);
+  border: 1px solid var(--cb-line);
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+#chatPanel .attachment-chip img {
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+  border-radius: 4px;
+  flex: 0 0 auto;
+}
+
+#chatPanel .attachment-chip .attachment-doc {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #e11d2a;
+  color: #fff;
+  border-radius: 4px;
+  font-size: 9px;
+  font-weight: 700;
+  flex: 0 0 auto;
+}
+
+#chatPanel .attachment-chip .attachment-doc.is-text {
+  background: #4b5563;
+}
+
+#chatPanel .attachment-chip .attachment-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#chatPanel .attachment-chip .attachment-remove {
+  background: var(--cb-fill);
+  border: none;
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  line-height: 1;
+  flex: 0 0 auto;
+  color: inherit;
+}
+
+#chatPanel .attachment-chip .attachment-remove:hover {
+  background: var(--cb-fill-hover);
+}
+
+#chatPanel.attach-dragover {
+  outline: 2px dashed var(--cb-accent, #2680eb);
+  outline-offset: -6px;
+}
+
+@keyframes blink {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0;
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+#settingsOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.04);
+  z-index: 10004;
+  display: none;
+}
+
+#settingsOverlay.open {
+  display: block;
+}
+
+#settingsDialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 480px;
+  background: var(--cb-surface);
+  color: var(--cb-text);
+  border: 1px solid var(--cb-line);
+  border-radius: 12px;
+  box-shadow: var(--cb-shadow-2);
+  z-index: 10005;
+  display: none;
+  pointer-events: auto;
+}
+
+#settingsDialog.open {
+  display: block;
+}
+
+#settingsDialog .settings-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--cb-line);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#settingsDialog .settings-header h2 {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0;
+  color: var(--cb-text);
+}
+
+#settingsDialog .settings-content {
+  padding: 24px;
+  max-height: 450px;
+  overflow-y: auto;
+}
+
+#settingsDialog .settings-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+#settingsDialog .settings-content::-webkit-scrollbar-thumb {
+  background: var(--cb-line);
+  border-radius: 3px;
+}
+
+#settingsDialog .setting-group {
+  margin-bottom: 24px;
+}
+
+#settingsDialog .setting-group:last-child {
+  margin-bottom: 0;
+}
+
+#settingsDialog .setting-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--cb-text);
+  margin-bottom: 8px;
+}
+
+#settingsDialog .setting-description {
+  font-size: 12px;
+  color: var(--cb-text-2);
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+/* Styled select (self-contained — ContentBox has no shared .cb-sel primitive) */
+#settingsDialog .cb-sel {
+  position: relative;
+}
+
+#settingsDialog .cb-sel + .cb-sel {
+  margin-top: 10px;
+}
+
+#settingsDialog .cb-sel select {
+  width: 100%;
+  height: 40px;
+  border: 1px solid var(--cb-line);
+  border-radius: 6px;
+  background: var(--cb-surface);
+  color: var(--cb-text);
+  font-size: 14px;
+  padding: 0 30px 0 11px;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+}
+
+#settingsDialog .cb-sel:after {
+  content: "";
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  width: 6px;
+  height: 6px;
+  pointer-events: none;
+  border-right: 1.5px solid var(--cb-text-3);
+  border-bottom: 1.5px solid var(--cb-text-3);
+  transform: translateY(-65%) rotate(45deg);
+}
+
+#settingsDialog .cb-sel select:focus-visible {
+  outline: 2px solid var(--cb-accent, #3e93f7);
+  outline-offset: 2px;
+}
+
+/* Footer actions (self-contained — no shared .cb-actions / .classic-* in ContentBox) */
+#settingsDialog .settings-footer {
+  padding: 16px 24px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+}
+
+#settingsDialog .settings-footer button {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: background 0.2s, opacity 0.2s;
+}
+
+#settingsDialog .settings-footer .classic-secondary {
+  background: var(--cb-fill);
+  color: var(--cb-text);
+}
+
+#settingsDialog .settings-footer .classic-secondary:hover {
+  background: var(--cb-fill-hover);
+}
+
+#settingsDialog .settings-footer .classic-primary {
+  background: var(--cb-chat-bubble-bg);
+  color: var(--cb-chat-bubble-text);
+}
+
+#settingsDialog .settings-footer .classic-primary:hover {
+  opacity: 0.9;
+}
+
+@media (max-width: 1024px) {
+  #chatPanel {
+    width: calc(100% - 32px);
+    height: 500px;
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
+  }
+}
+@media (max-width: 640px) {
+  #chatPanel {
+    width: calc(100% - 16px);
+    height: 400px;
+    bottom: 8px;
+    right: 8px;
+    left: 8px;
+  }
+
+  #settingsDialog {
+    width: calc(100% - 32px);
+  }
+}