/*
 * Tailwind entry for the COMPOSER bundle.
 *
 * Preflight (`@tailwind base`) is kept here on purpose: the composer panel owns
 * its own host, a floating shell and, in Elementor, a preview iframe, so a
 * global reset inside that document is wanted.
 *
 * The design tokens moved to shadcn-tokens.css so the dashboard bundle can load
 * them without preflight (see admin-island.css). Import order matters: tokens
 * are unlayered and must come after the directives.
 */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*
 ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.uich-tw .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;
}
.uich-tw .pointer-events-none {
  pointer-events: none;
}
.uich-tw .pointer-events-auto {
  pointer-events: auto;
}
.uich-tw .visible {
  visibility: visible;
}
.uich-tw .invisible {
  visibility: hidden;
}
.uich-tw .collapse {
  visibility: collapse;
}
.uich-tw .static {
  position: static;
}
.uich-tw .fixed {
  position: fixed;
}
.uich-tw .absolute {
  position: absolute;
}
.uich-tw .relative {
  position: relative;
}
.uich-tw .sticky {
  position: sticky;
}
.uich-tw .inset-0 {
  inset: 0px;
}
.uich-tw .inset-x-0 {
  right: 0px;
  left: 0px;
}
.uich-tw .inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.uich-tw .inset-y-2 {
  top: 0.5rem;
  bottom: 0.5rem;
}
.uich-tw .-bottom-1 {
  bottom: -0.25rem;
}
.uich-tw .-right-6 {
  left: -1.5rem;
}
.uich-tw .-top-1 {
  top: -0.25rem;
}
.uich-tw .-top-8 {
  top: -2rem;
}
.uich-tw .bottom-3 {
  bottom: 0.75rem;
}
.uich-tw .bottom-6 {
  bottom: 1.5rem;
}
.uich-tw .left-0 {
  right: 0px;
}
.uich-tw .left-1\/2 {
  right: 50%;
}
.uich-tw .left-2 {
  right: 0.5rem;
}
.uich-tw .left-3 {
  right: 0.75rem;
}
.uich-tw .left-\[50\%\] {
  right: 50%;
}
.uich-tw .right-0 {
  left: 0px;
}
.uich-tw .right-1 {
  left: 0.25rem;
}
.uich-tw .right-2 {
  left: 0.5rem;
}
.uich-tw .right-3 {
  left: 0.75rem;
}
.uich-tw .right-4 {
  left: 1rem;
}
.uich-tw .right-6 {
  left: 1.5rem;
}
.uich-tw .top-0 {
  top: 0px;
}
.uich-tw .top-1 {
  top: 0.25rem;
}
.uich-tw .top-1\/2 {
  top: 50%;
}
.uich-tw .top-3 {
  top: 0.75rem;
}
.uich-tw .top-4 {
  top: 1rem;
}
.uich-tw .top-6 {
  top: 1.5rem;
}
.uich-tw .top-\[50\%\] {
  top: 50%;
}
.uich-tw .top-full {
  top: 100%;
}
.uich-tw .isolate {
  isolation: isolate;
}
.uich-tw .z-10 {
  z-index: 10;
}
.uich-tw .z-30 {
  z-index: 30;
}
.uich-tw .z-50 {
  z-index: 50;
}
.uich-tw .z-\[11\] {
  z-index: 11;
}
.uich-tw .z-\[2147483646\] {
  z-index: 2147483646;
}
.uich-tw .z-\[2147483647\] {
  z-index: 2147483647;
}
.uich-tw .z-\[99999\] {
  z-index: 99999;
}
.uich-tw .col-span-2 {
  grid-column: span 2 / span 2;
}
.uich-tw .m-3 {
  margin: 0.75rem;
}
.uich-tw .m-auto {
  margin: auto;
}
.uich-tw .-mx-1 {
  margin-right: -0.25rem;
  margin-left: -0.25rem;
}
.uich-tw .-mx-2 {
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}
.uich-tw .mx-4 {
  margin-right: 1rem;
  margin-left: 1rem;
}
.uich-tw .mx-auto {
  margin-right: auto;
  margin-left: auto;
}
.uich-tw .my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.uich-tw .my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.uich-tw .my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.uich-tw .-mb-2 {
  margin-bottom: -0.5rem;
}
.uich-tw .-mb-px {
  margin-bottom: -1px;
}
.uich-tw .mb-1\.5 {
  margin-bottom: 0.375rem;
}
.uich-tw .mb-2 {
  margin-bottom: 0.5rem;
}
.uich-tw .mb-2\.5 {
  margin-bottom: 0.625rem;
}
.uich-tw .mb-3 {
  margin-bottom: 0.75rem;
}
.uich-tw .mb-4 {
  margin-bottom: 1rem;
}
.uich-tw .ml-0\.5 {
  margin-right: 0.125rem;
}
.uich-tw .ml-1 {
  margin-right: 0.25rem;
}
.uich-tw .ml-auto {
  margin-right: auto;
}
.uich-tw .mr-1 {
  margin-left: 0.25rem;
}
.uich-tw .mr-2 {
  margin-left: 0.5rem;
}
.uich-tw .mr-3 {
  margin-left: 0.75rem;
}
.uich-tw .mt-0\.5 {
  margin-top: 0.125rem;
}
.uich-tw .mt-1 {
  margin-top: 0.25rem;
}
.uich-tw .mt-1\.5 {
  margin-top: 0.375rem;
}
.uich-tw .mt-2 {
  margin-top: 0.5rem;
}
.uich-tw .mt-3 {
  margin-top: 0.75rem;
}
.uich-tw .mt-3\.5 {
  margin-top: 0.875rem;
}
.uich-tw .mt-4 {
  margin-top: 1rem;
}
.uich-tw .mt-5 {
  margin-top: 1.25rem;
}
.uich-tw .mt-6 {
  margin-top: 1.5rem;
}
.uich-tw .mt-auto {
  margin-top: auto;
}
.uich-tw .\!block {
  display: block !important;
}
.uich-tw .block {
  display: block;
}
.uich-tw .inline-block {
  display: inline-block;
}
.uich-tw .inline {
  display: inline;
}
.uich-tw .flex {
  display: flex;
}
.uich-tw .inline-flex {
  display: inline-flex;
}
.uich-tw .table {
  display: table;
}
.uich-tw .table-cell {
  display: table-cell;
}
.uich-tw .table-row {
  display: table-row;
}
.uich-tw .flow-root {
  display: flow-root;
}
.uich-tw .grid {
  display: grid;
}
.uich-tw .inline-grid {
  display: inline-grid;
}
.uich-tw .contents {
  display: contents;
}
.uich-tw .list-item {
  display: list-item;
}
.uich-tw .hidden {
  display: none;
}
.uich-tw .aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}
.uich-tw .size-1\.5 {
  width: 0.375rem;
  height: 0.375rem;
}
.uich-tw .size-11 {
  width: 2.75rem;
  height: 2.75rem;
}
.uich-tw .size-12 {
  width: 3rem;
  height: 3rem;
}
.uich-tw .size-16 {
  width: 4rem;
  height: 4rem;
}
.uich-tw .size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.uich-tw .size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.uich-tw .size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.uich-tw .size-4 {
  width: 1rem;
  height: 1rem;
}
.uich-tw .size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.uich-tw .size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.uich-tw .size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.uich-tw .size-8 {
  width: 2rem;
  height: 2rem;
}
.uich-tw .size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.uich-tw .size-\[18px\] {
  width: 18px;
  height: 18px;
}
.uich-tw .\!h-4 {
  height: 1rem !important;
}
.uich-tw .h-1 {
  height: 0.25rem;
}
.uich-tw .h-1\.5 {
  height: 0.375rem;
}
.uich-tw .h-10 {
  height: 2.5rem;
}
.uich-tw .h-2 {
  height: 0.5rem;
}
.uich-tw .h-2\.5 {
  height: 0.625rem;
}
.uich-tw .h-3 {
  height: 0.75rem;
}
.uich-tw .h-3\.5 {
  height: 0.875rem;
}
.uich-tw .h-4 {
  height: 1rem;
}
.uich-tw .h-44 {
  height: 11rem;
}
.uich-tw .h-5 {
  height: 1.25rem;
}
.uich-tw .h-6 {
  height: 1.5rem;
}
.uich-tw .h-7 {
  height: 1.75rem;
}
.uich-tw .h-8 {
  height: 2rem;
}
.uich-tw .h-9 {
  height: 2.25rem;
}
.uich-tw .h-\[1px\] {
  height: 1px;
}
.uich-tw .h-\[22px\] {
  height: 22px;
}
.uich-tw .h-\[26px\] {
  height: 26px;
}
.uich-tw .h-\[2px\] {
  height: 2px;
}
.uich-tw .h-\[620px\] {
  height: 620px;
}
.uich-tw .h-\[70vh\] {
  height: 70vh;
}
.uich-tw .h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.uich-tw .h-auto {
  height: auto;
}
.uich-tw .h-full {
  height: 100%;
}
.uich-tw .h-px {
  height: 1px;
}
.uich-tw .max-h-52 {
  max-height: 13rem;
}
.uich-tw .max-h-96 {
  max-height: 24rem;
}
.uich-tw .max-h-\[140px\] {
  max-height: 140px;
}
.uich-tw .max-h-\[220px\] {
  max-height: 220px;
}
.uich-tw .max-h-\[260px\] {
  max-height: 260px;
}
.uich-tw .max-h-\[280px\] {
  max-height: 280px;
}
.uich-tw .max-h-\[300px\] {
  max-height: 300px;
}
.uich-tw .max-h-\[52vh\] {
  max-height: 52vh;
}
.uich-tw .max-h-\[86\%\] {
  max-height: 86%;
}
.uich-tw .max-h-\[86vh\] {
  max-height: 86vh;
}
.uich-tw .max-h-\[min\(360px\2c 60vh\)\] {
  max-height: min(360px, 60vh);
}
.uich-tw .min-h-0 {
  min-height: 0px;
}
.uich-tw .min-h-\[420px\] {
  min-height: 420px;
}
.uich-tw .min-h-\[520px\] {
  min-height: 520px;
}
.uich-tw .min-h-\[60px\] {
  min-height: 60px;
}
.uich-tw .min-h-\[90px\] {
  min-height: 90px;
}
.uich-tw .\!w-7 {
  width: 1.75rem !important;
}
.uich-tw .w-0\.5 {
  width: 0.125rem;
}
.uich-tw .w-1 {
  width: 0.25rem;
}
.uich-tw .w-1\.5 {
  width: 0.375rem;
}
.uich-tw .w-10 {
  width: 2.5rem;
}
.uich-tw .w-16 {
  width: 4rem;
}
.uich-tw .w-2 {
  width: 0.5rem;
}
.uich-tw .w-2\.5 {
  width: 0.625rem;
}
.uich-tw .w-20 {
  width: 5rem;
}
.uich-tw .w-24 {
  width: 6rem;
}
.uich-tw .w-28 {
  width: 7rem;
}
.uich-tw .w-3\.5 {
  width: 0.875rem;
}
.uich-tw .w-32 {
  width: 8rem;
}
.uich-tw .w-36 {
  width: 9rem;
}
.uich-tw .w-4 {
  width: 1rem;
}
.uich-tw .w-44 {
  width: 11rem;
}
.uich-tw .w-48 {
  width: 12rem;
}
.uich-tw .w-5 {
  width: 1.25rem;
}
.uich-tw .w-52 {
  width: 13rem;
}
.uich-tw .w-56 {
  width: 14rem;
}
.uich-tw .w-6 {
  width: 1.5rem;
}
.uich-tw .w-60 {
  width: 15rem;
}
.uich-tw .w-64 {
  width: 16rem;
}
.uich-tw .w-7 {
  width: 1.75rem;
}
.uich-tw .w-72 {
  width: 18rem;
}
.uich-tw .w-8 {
  width: 2rem;
}
.uich-tw .w-9 {
  width: 2.25rem;
}
.uich-tw .w-\[1\%\] {
  width: 1%;
}
.uich-tw .w-\[104px\] {
  width: 104px;
}
.uich-tw .w-\[150px\] {
  width: 150px;
}
.uich-tw .w-\[176px\] {
  width: 176px;
}
.uich-tw .w-\[184px\] {
  width: 184px;
}
.uich-tw .w-\[190px\] {
  width: 190px;
}
.uich-tw .w-\[1px\] {
  width: 1px;
}
.uich-tw .w-\[320px\] {
  width: 320px;
}
.uich-tw .w-\[34\%\] {
  width: 34%;
}
.uich-tw .w-\[36\%\] {
  width: 36%;
}
.uich-tw .w-\[380px\] {
  width: 380px;
}
.uich-tw .w-\[42\%\] {
  width: 42%;
}
.uich-tw .w-\[92vw\] {
  width: 92vw;
}
.uich-tw .w-\[min\(520px\2c 95vw\)\] {
  width: min(520px, 95vw);
}
.uich-tw .w-\[min\(600px\2c 95vw\)\] {
  width: min(600px, 95vw);
}
.uich-tw .w-\[min\(640px\2c 94\%\)\] {
  width: min(640px, 94%);
}
.uich-tw .w-\[min\(860px\2c 95vw\)\] {
  width: min(860px, 95vw);
}
.uich-tw .w-auto {
  width: auto;
}
.uich-tw .w-full {
  width: 100%;
}
.uich-tw .w-max {
  width: -moz-max-content;
  width: max-content;
}
.uich-tw .min-w-0 {
  min-width: 0px;
}
.uich-tw .min-w-10 {
  min-width: 2.5rem;
}
.uich-tw .min-w-4 {
  min-width: 1rem;
}
.uich-tw .min-w-7 {
  min-width: 1.75rem;
}
.uich-tw .min-w-8 {
  min-width: 2rem;
}
.uich-tw .min-w-9 {
  min-width: 2.25rem;
}
.uich-tw .min-w-\[10rem\] {
  min-width: 10rem;
}
.uich-tw .min-w-\[16px\] {
  min-width: 16px;
}
.uich-tw .min-w-\[180px\] {
  min-width: 180px;
}
.uich-tw .min-w-\[84px\] {
  min-width: 84px;
}
.uich-tw .min-w-\[8rem\] {
  min-width: 8rem;
}
.uich-tw .min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.uich-tw .min-w-full {
  min-width: 100%;
}
.uich-tw .max-w-2xl {
  max-width: 42rem;
}
.uich-tw .max-w-5xl {
  max-width: 64rem;
}
.uich-tw .max-w-\[180px\] {
  max-width: 180px;
}
.uich-tw .max-w-\[280px\] {
  max-width: 280px;
}
.uich-tw .max-w-\[90vw\] {
  max-width: 90vw;
}
.uich-tw .max-w-\[min\(340px\2c 90vw\)\] {
  max-width: min(340px, 90vw);
}
.uich-tw .max-w-full {
  max-width: 100%;
}
.uich-tw .max-w-lg {
  max-width: 32rem;
}
.uich-tw .max-w-md {
  max-width: 28rem;
}
.uich-tw .max-w-sm {
  max-width: 24rem;
}
.uich-tw .max-w-xs {
  max-width: 20rem;
}
.uich-tw .flex-1 {
  flex: 1 1 0%;
}
.uich-tw .flex-shrink {
  flex-shrink: 1;
}
.uich-tw .shrink {
  flex-shrink: 1;
}
.uich-tw .shrink-0 {
  flex-shrink: 0;
}
.uich-tw .flex-grow {
  flex-grow: 1;
}
.uich-tw .grow {
  flex-grow: 1;
}
.uich-tw .border-collapse {
  border-collapse: collapse;
}
.uich-tw .origin-top-left {
  transform-origin: top right;
}
.uich-tw .-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-x-3 {
  --tw-translate-x: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-x-4 {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-x-\[110\%\] {
  --tw-translate-x: 110%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-y-\[calc\(-100\%-6px\)\] {
  --tw-translate-y: calc(-100% - 6px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.uich-tw .animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.uich-tw .cursor-default {
  cursor: default;
}
.uich-tw .cursor-grab {
  cursor: grab;
}
.uich-tw .cursor-not-allowed {
  cursor: not-allowed;
}
.uich-tw .cursor-pointer {
  cursor: pointer;
}
.uich-tw .touch-none {
  touch-action: none;
}
.uich-tw .select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.uich-tw .resize-none {
  resize: none;
}
.uich-tw .resize-y {
  resize: vertical;
}
.uich-tw .resize {
  resize: both;
}
.uich-tw .list-none {
  list-style-type: none;
}
.uich-tw .appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.uich-tw .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.uich-tw .grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.uich-tw .grid-cols-\[repeat\(auto-fill\2c minmax\(44px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(44px,1fr));
}
.uich-tw .flex-col {
  flex-direction: column;
}
.uich-tw .flex-col-reverse {
  flex-direction: column-reverse;
}
.uich-tw .flex-wrap {
  flex-wrap: wrap;
}
.uich-tw .items-start {
  align-items: flex-start;
}
.uich-tw .items-center {
  align-items: center;
}
.uich-tw .justify-start {
  justify-content: flex-start;
}
.uich-tw .justify-end {
  justify-content: flex-end;
}
.uich-tw .justify-center {
  justify-content: center;
}
.uich-tw .justify-between {
  justify-content: space-between;
}
.uich-tw .gap-0 {
  gap: 0px;
}
.uich-tw .gap-0\.5 {
  gap: 0.125rem;
}
.uich-tw .gap-1 {
  gap: 0.25rem;
}
.uich-tw .gap-1\.5 {
  gap: 0.375rem;
}
.uich-tw .gap-2 {
  gap: 0.5rem;
}
.uich-tw .gap-2\.5 {
  gap: 0.625rem;
}
.uich-tw .gap-3 {
  gap: 0.75rem;
}
.uich-tw .gap-4 {
  gap: 1rem;
}
.uich-tw .gap-6 {
  gap: 1.5rem;
}
.uich-tw .gap-7 {
  gap: 1.75rem;
}
.uich-tw .gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}
.uich-tw .gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.uich-tw .gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.uich-tw .gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.uich-tw .gap-y-1 {
  row-gap: 0.25rem;
}
.uich-tw .gap-y-2 {
  row-gap: 0.5rem;
}
.uich-tw .gap-y-3 {
  row-gap: 0.75rem;
}
.uich-tw :is(.space-y-0\.5 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.uich-tw :is(.space-y-1\.5 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.uich-tw :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.uich-tw :is(.space-y-5 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.uich-tw :is(.divide-y > :not([hidden]) ~ :not([hidden])) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.uich-tw :is(.divide-border\/60 > :not([hidden]) ~ :not([hidden])) {
  border-color: hsl(var(--border) / 0.6);
}
.uich-tw .self-start {
  align-self: flex-start;
}
.uich-tw .self-end {
  align-self: flex-end;
}
.uich-tw .self-center {
  align-self: center;
}
.uich-tw .overflow-auto {
  overflow: auto;
}
.uich-tw .overflow-hidden {
  overflow: hidden;
}
.uich-tw .overflow-visible {
  overflow: visible;
}
.uich-tw .overflow-x-auto {
  overflow-x: auto;
}
.uich-tw .overflow-y-auto {
  overflow-y: auto;
}
.uich-tw .overflow-x-hidden {
  overflow-x: hidden;
}
.uich-tw .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uich-tw .whitespace-nowrap {
  white-space: nowrap;
}
.uich-tw .whitespace-pre-wrap {
  white-space: pre-wrap;
}
.uich-tw .break-all {
  word-break: break-all;
}
.uich-tw .rounded {
  border-radius: 0.25rem;
}
.uich-tw .rounded-2xl {
  border-radius: 1rem;
}
.uich-tw .rounded-\[10px\] {
  border-radius: 10px;
}
.uich-tw .rounded-\[15px\] {
  border-radius: 15px;
}
.uich-tw .rounded-\[6px\] {
  border-radius: 6px;
}
.uich-tw .rounded-\[9px\] {
  border-radius: 9px;
}
.uich-tw .rounded-\[inherit\] {
  border-radius: inherit;
}
.uich-tw .rounded-full {
  border-radius: 9999px;
}
.uich-tw .rounded-lg {
  border-radius: var(--radius);
}
.uich-tw .rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.uich-tw .rounded-none {
  border-radius: 0px;
}
.uich-tw .rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.uich-tw .rounded-xl {
  border-radius: 0.75rem;
}
.uich-tw .rounded-l-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.uich-tw .rounded-r {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.uich-tw .rounded-r-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.uich-tw .rounded-tr-\[10px\] {
  border-top-left-radius: 10px;
}
.uich-tw .border {
  border-width: 1px;
}
.uich-tw .border-0 {
  border-width: 0px;
}
.uich-tw .border-2 {
  border-width: 2px;
}
.uich-tw .border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.uich-tw .border-b {
  border-bottom-width: 1px;
}
.uich-tw .border-l {
  border-right-width: 1px;
}
.uich-tw .border-l-\[3px\] {
  border-right-width: 3px;
}
.uich-tw .border-r {
  border-left-width: 1px;
}
.uich-tw .border-t {
  border-top-width: 1px;
}
.uich-tw .border-dashed {
  border-style: dashed;
}
.uich-tw .border-\[\#0E7C6B\]\/45 {
  border-color: rgb(14 124 107 / 0.45);
}
.uich-tw .border-\[\#0e7c6b\]\/20 {
  border-color: rgb(14 124 107 / 0.2);
}
.uich-tw .border-\[\#171717\]\/20 {
  border-color: rgb(23 23 23 / 0.2);
}
.uich-tw .border-\[\#b4603a\]\/20 {
  border-color: rgb(180 96 58 / 0.2);
}
.uich-tw .border-border {
  border-color: hsl(var(--border));
}
.uich-tw .border-border\/60 {
  border-color: hsl(var(--border) / 0.6);
}
.uich-tw .border-destructive\/20 {
  border-color: hsl(var(--destructive) / 0.2);
}
.uich-tw .border-destructive\/30 {
  border-color: hsl(var(--destructive) / 0.3);
}
.uich-tw .border-destructive\/40 {
  border-color: hsl(var(--destructive) / 0.4);
}
.uich-tw .border-destructive\/45 {
  border-color: hsl(var(--destructive) / 0.45);
}
.uich-tw .border-input {
  border-color: hsl(var(--input));
}
.uich-tw .border-muted-foreground\/60 {
  border-color: hsl(var(--muted-foreground) / 0.6);
}
.uich-tw .border-primary {
  border-color: hsl(var(--primary));
}
.uich-tw .border-primary-foreground\/40 {
  border-color: hsl(var(--primary-foreground) / 0.4);
}
.uich-tw .border-primary\/50 {
  border-color: hsl(var(--primary) / 0.5);
}
.uich-tw .border-transparent {
  border-color: transparent;
}
.uich-tw .border-l-foreground\/40 {
  border-right-color: hsl(var(--foreground) / 0.4);
}
.uich-tw .border-l-transparent {
  border-right-color: transparent;
}
.uich-tw .border-t-transparent {
  border-top-color: transparent;
}
.uich-tw .bg-\[\#0E7C6B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(14 124 107 / var(--tw-bg-opacity, 1));
}
.uich-tw .bg-\[\#0e7c6b\]\/10 {
  background-color: rgb(14 124 107 / 0.1);
}
.uich-tw .bg-\[\#0e7c6b\]\/\[0\.06\] {
  background-color: rgb(14 124 107 / 0.06);
}
.uich-tw .bg-\[\#171717\]\/10 {
  background-color: rgb(23 23 23 / 0.1);
}
.uich-tw .bg-\[\#171717\]\/\[0\.07\] {
  background-color: rgb(23 23 23 / 0.07);
}
.uich-tw .bg-\[\#BDEFE7\]\/50 {
  background-color: rgb(189 239 231 / 0.5);
}
.uich-tw .bg-\[\#fbe0d0\]\/40 {
  background-color: rgb(251 224 208 / 0.4);
}
.uich-tw .bg-accent {
  background-color: hsl(var(--accent));
}
.uich-tw .bg-background {
  background-color: hsl(var(--background));
}
.uich-tw .bg-background\/60 {
  background-color: hsl(var(--background) / 0.6);
}
.uich-tw .bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.uich-tw .bg-border {
  background-color: hsl(var(--border));
}
.uich-tw .bg-card {
  background-color: hsl(var(--card));
}
.uich-tw .bg-card\/90 {
  background-color: hsl(var(--card) / 0.9);
}
.uich-tw .bg-current {
  background-color: currentColor;
}
.uich-tw .bg-destructive {
  background-color: hsl(var(--destructive));
}
.uich-tw .bg-destructive\/10 {
  background-color: hsl(var(--destructive) / 0.1);
}
.uich-tw .bg-destructive\/15 {
  background-color: hsl(var(--destructive) / 0.15);
}
.uich-tw .bg-destructive\/5 {
  background-color: hsl(var(--destructive) / 0.05);
}
.uich-tw .bg-destructive\/\[0\.04\] {
  background-color: hsl(var(--destructive) / 0.04);
}
.uich-tw .bg-foreground {
  background-color: hsl(var(--foreground));
}
.uich-tw .bg-foreground\/40 {
  background-color: hsl(var(--foreground) / 0.4);
}
.uich-tw .bg-input {
  background-color: hsl(var(--input));
}
.uich-tw .bg-muted {
  background-color: hsl(var(--muted));
}
.uich-tw .bg-muted-foreground {
  background-color: hsl(var(--muted-foreground));
}
.uich-tw .bg-muted-foreground\/15 {
  background-color: hsl(var(--muted-foreground) / 0.15);
}
.uich-tw .bg-muted\/20 {
  background-color: hsl(var(--muted) / 0.2);
}
.uich-tw .bg-muted\/30 {
  background-color: hsl(var(--muted) / 0.3);
}
.uich-tw .bg-muted\/40 {
  background-color: hsl(var(--muted) / 0.4);
}
.uich-tw .bg-muted\/50 {
  background-color: hsl(var(--muted) / 0.5);
}
.uich-tw .bg-popover {
  background-color: hsl(var(--popover));
}
.uich-tw .bg-primary {
  background-color: hsl(var(--primary));
}
.uich-tw .bg-primary-foreground\/10 {
  background-color: hsl(var(--primary-foreground) / 0.1);
}
.uich-tw .bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}
.uich-tw .bg-primary\/20 {
  background-color: hsl(var(--primary) / 0.2);
}
.uich-tw .bg-secondary {
  background-color: hsl(var(--secondary));
}
.uich-tw .bg-transparent {
  background-color: transparent;
}
.uich-tw .bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.uich-tw .bg-gradient-to-br {
  background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}
.uich-tw .bg-gradient-to-l {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.uich-tw .bg-gradient-to-r {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.uich-tw .from-\[\#171717\]\/\[0\.07\] {
  --tw-gradient-from: rgb(23 23 23 / 0.07) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(23 23 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.uich-tw .from-card {
  --tw-gradient-from: hsl(var(--card)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--card) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.uich-tw .via-card {
  --tw-gradient-to: hsl(var(--card) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--card)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.uich-tw .to-card {
  --tw-gradient-to: hsl(var(--card)) var(--tw-gradient-to-position);
}
.uich-tw .to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.uich-tw .fill-current {
  fill: currentColor;
}
.uich-tw .object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.uich-tw .p-0 {
  padding: 0px;
}
.uich-tw .p-0\.5 {
  padding: 0.125rem;
}
.uich-tw .p-1 {
  padding: 0.25rem;
}
.uich-tw .p-1\.5 {
  padding: 0.375rem;
}
.uich-tw .p-2 {
  padding: 0.5rem;
}
.uich-tw .p-2\.5 {
  padding: 0.625rem;
}
.uich-tw .p-3 {
  padding: 0.75rem;
}
.uich-tw .p-3\.5 {
  padding: 0.875rem;
}
.uich-tw .p-4 {
  padding: 1rem;
}
.uich-tw .p-5 {
  padding: 1.25rem;
}
.uich-tw .p-6 {
  padding: 1.5rem;
}
.uich-tw .p-\[1px\] {
  padding: 1px;
}
.uich-tw .p-\[3px\] {
  padding: 3px;
}
.uich-tw .px-0 {
  padding-right: 0px;
  padding-left: 0px;
}
.uich-tw .px-1 {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}
.uich-tw .px-1\.5 {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}
.uich-tw .px-2 {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
.uich-tw .px-2\.5 {
  padding-right: 0.625rem;
  padding-left: 0.625rem;
}
.uich-tw .px-3 {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}
.uich-tw .px-4 {
  padding-right: 1rem;
  padding-left: 1rem;
}
.uich-tw .px-5 {
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}
.uich-tw .px-6 {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}
.uich-tw .px-7 {
  padding-right: 1.75rem;
  padding-left: 1.75rem;
}
.uich-tw .px-8 {
  padding-right: 2rem;
  padding-left: 2rem;
}
.uich-tw .py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.uich-tw .py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.uich-tw .py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.uich-tw .py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.uich-tw .py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.uich-tw .py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.uich-tw .py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.uich-tw .py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.uich-tw .py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.uich-tw .py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.uich-tw .py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.uich-tw .py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.uich-tw .pb-0\.5 {
  padding-bottom: 0.125rem;
}
.uich-tw .pb-1 {
  padding-bottom: 0.25rem;
}
.uich-tw .pb-1\.5 {
  padding-bottom: 0.375rem;
}
.uich-tw .pb-2 {
  padding-bottom: 0.5rem;
}
.uich-tw .pb-2\.5 {
  padding-bottom: 0.625rem;
}
.uich-tw .pb-4 {
  padding-bottom: 1rem;
}
.uich-tw .pb-5 {
  padding-bottom: 1.25rem;
}
.uich-tw .pb-8 {
  padding-bottom: 2rem;
}
.uich-tw .pl-12 {
  padding-right: 3rem;
}
.uich-tw .pl-2 {
  padding-right: 0.5rem;
}
.uich-tw .pl-2\.5 {
  padding-right: 0.625rem;
}
.uich-tw .pl-4 {
  padding-right: 1rem;
}
.uich-tw .pl-6 {
  padding-right: 1.5rem;
}
.uich-tw .pl-8 {
  padding-right: 2rem;
}
.uich-tw .pr-1 {
  padding-left: 0.25rem;
}
.uich-tw .pr-2 {
  padding-left: 0.5rem;
}
.uich-tw .pr-4 {
  padding-left: 1rem;
}
.uich-tw .pr-6 {
  padding-left: 1.5rem;
}
.uich-tw .pr-7 {
  padding-left: 1.75rem;
}
.uich-tw .pr-8 {
  padding-left: 2rem;
}
.uich-tw .pr-9 {
  padding-left: 2.25rem;
}
.uich-tw .pt-0 {
  padding-top: 0px;
}
.uich-tw .pt-0\.5 {
  padding-top: 0.125rem;
}
.uich-tw .pt-1 {
  padding-top: 0.25rem;
}
.uich-tw .pt-2 {
  padding-top: 0.5rem;
}
.uich-tw .pt-3 {
  padding-top: 0.75rem;
}
.uich-tw .pt-3\.5 {
  padding-top: 0.875rem;
}
.uich-tw .pt-5 {
  padding-top: 1.25rem;
}
.uich-tw .text-left {
  text-align: right;
}
.uich-tw .text-center {
  text-align: center;
}
.uich-tw .text-right {
  text-align: left;
}
.uich-tw .align-top {
  vertical-align: top;
}
.uich-tw .align-middle {
  vertical-align: middle;
}
.uich-tw .font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.uich-tw .font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.uich-tw .text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.uich-tw .text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.uich-tw .text-\[10px\] {
  font-size: 10px;
}
.uich-tw .text-\[11\.5px\] {
  font-size: 11.5px;
}
.uich-tw .text-\[11px\] {
  font-size: 11px;
}
.uich-tw .text-\[12px\] {
  font-size: 12px;
}
.uich-tw .text-\[13px\] {
  font-size: 13px;
}
.uich-tw .text-\[14px\] {
  font-size: 14px;
}
.uich-tw .text-\[15px\] {
  font-size: 15px;
}
.uich-tw .text-\[16px\] {
  font-size: 16px;
}
.uich-tw .text-\[9px\] {
  font-size: 9px;
}
.uich-tw .text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.uich-tw .text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.uich-tw .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uich-tw .text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.uich-tw .text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uich-tw .font-bold {
  font-weight: 700;
}
.uich-tw .font-medium {
  font-weight: 500;
}
.uich-tw .font-normal {
  font-weight: 400;
}
.uich-tw .font-semibold {
  font-weight: 600;
}
.uich-tw .uppercase {
  text-transform: uppercase;
}
.uich-tw .lowercase {
  text-transform: lowercase;
}
.uich-tw .capitalize {
  text-transform: capitalize;
}
.uich-tw .italic {
  font-style: italic;
}
.uich-tw .tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.uich-tw .leading-\[17\.5px\] {
  line-height: 17.5px;
}
.uich-tw .leading-none {
  line-height: 1;
}
.uich-tw .leading-relaxed {
  line-height: 1.625;
}
.uich-tw .leading-snug {
  line-height: 1.375;
}
.uich-tw .leading-tight {
  line-height: 1.25;
}
.uich-tw .tracking-\[-0\.35px\] {
  letter-spacing: -0.35px;
}
.uich-tw .tracking-\[-0\.4px\] {
  letter-spacing: -0.4px;
}
.uich-tw .tracking-tight {
  letter-spacing: -0.025em;
}
.uich-tw .tracking-wide {
  letter-spacing: 0.025em;
}
.uich-tw .tracking-wider {
  letter-spacing: 0.05em;
}
.uich-tw .tracking-widest {
  letter-spacing: 0.1em;
}
.uich-tw .text-\[\#0E7C6B\] {
  --tw-text-opacity: 1;
  color: rgb(14 124 107 / var(--tw-text-opacity, 1));
}
.uich-tw .text-\[\#0e7c6b\] {
  --tw-text-opacity: 1;
  color: rgb(14 124 107 / var(--tw-text-opacity, 1));
}
.uich-tw .text-\[\#171717\] {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}
.uich-tw .text-\[\#171717\]\/\[0\.06\] {
  color: rgb(23 23 23 / 0.06);
}
.uich-tw .text-\[\#b4603a\] {
  --tw-text-opacity: 1;
  color: rgb(180 96 58 / var(--tw-text-opacity, 1));
}
.uich-tw .text-accent-foreground {
  color: hsl(var(--accent-foreground));
}
.uich-tw .text-background {
  color: hsl(var(--background));
}
.uich-tw .text-card-foreground {
  color: hsl(var(--card-foreground));
}
.uich-tw .text-current {
  color: currentColor;
}
.uich-tw .text-destructive {
  color: hsl(var(--destructive));
}
.uich-tw .text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}
.uich-tw .text-foreground {
  color: hsl(var(--foreground));
}
.uich-tw .text-foreground\/60 {
  color: hsl(var(--foreground) / 0.6);
}
.uich-tw .text-input {
  color: hsl(var(--input));
}
.uich-tw .text-muted-foreground {
  color: hsl(var(--muted-foreground));
}
.uich-tw .text-muted-foreground\/50 {
  color: hsl(var(--muted-foreground) / 0.5);
}
.uich-tw .text-muted-foreground\/60 {
  color: hsl(var(--muted-foreground) / 0.6);
}
.uich-tw .text-muted-foreground\/70 {
  color: hsl(var(--muted-foreground) / 0.7);
}
.uich-tw .text-popover-foreground {
  color: hsl(var(--popover-foreground));
}
.uich-tw .text-primary {
  color: hsl(var(--primary));
}
.uich-tw .text-primary-foreground {
  color: hsl(var(--primary-foreground));
}
.uich-tw .text-primary-foreground\/70 {
  color: hsl(var(--primary-foreground) / 0.7);
}
.uich-tw .text-primary-foreground\/80 {
  color: hsl(var(--primary-foreground) / 0.8);
}
.uich-tw .text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}
.uich-tw .text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.uich-tw .underline {
  text-decoration-line: underline;
}
.uich-tw .overline {
  text-decoration-line: overline;
}
.uich-tw .line-through {
  text-decoration-line: line-through;
}
.uich-tw .underline-offset-2 {
  text-underline-offset: 2px;
}
.uich-tw .underline-offset-4 {
  text-underline-offset: 4px;
}
.uich-tw .opacity-0 {
  opacity: 0;
}
.uich-tw .opacity-100 {
  opacity: 1;
}
.uich-tw .opacity-40 {
  opacity: 0.4;
}
.uich-tw .opacity-50 {
  opacity: 0.5;
}
.uich-tw .opacity-60 {
  opacity: 0.6;
}
.uich-tw .opacity-70 {
  opacity: 0.7;
}
.uich-tw .opacity-75 {
  opacity: 0.75;
}
.uich-tw .opacity-80 {
  opacity: 0.8;
}
.uich-tw .opacity-90 {
  opacity: 0.9;
}
.uich-tw .shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0 4px 16px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.uich-tw .\!outline {
  outline-style: solid !important;
}
.uich-tw .outline {
  outline-style: solid;
}
.uich-tw .\!ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.uich-tw .ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .ring-border {
  --tw-ring-color: hsl(var(--border));
}
.uich-tw .ring-ring {
  --tw-ring-color: hsl(var(--ring));
}
.uich-tw .ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.uich-tw .blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.uich-tw .grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.uich-tw .invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.uich-tw .sepia {
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.uich-tw .filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.uich-tw .backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.uich-tw .transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.uich-tw .transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.uich-tw .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.uich-tw .transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.uich-tw .transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.uich-tw .duration-200 {
  transition-duration: 200ms;
}
.uich-tw .duration-300 {
  transition-duration: 300ms;
}
.uich-tw .ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.uich-tw .ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.uich-tw .ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.uich-tw .animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.uich-tw .fade-in {
  --tw-enter-opacity: 0;
}
.uich-tw .fade-in-0 {
  --tw-enter-opacity: 0;
}
.uich-tw .fade-in-80 {
  --tw-enter-opacity: 0.8;
}
.uich-tw .zoom-in {
  --tw-enter-scale: 0;
}
.uich-tw .zoom-in-95 {
  --tw-enter-scale: .95;
}
.uich-tw .zoom-out {
  --tw-exit-scale: 0;
}
.uich-tw .slide-in-from-top-1 {
  --tw-enter-translate-y: -0.25rem;
}
.uich-tw .duration-200 {
  animation-duration: 200ms;
}
.uich-tw .duration-300 {
  animation-duration: 300ms;
}
.uich-tw .ease-in {
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.uich-tw .ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.uich-tw .ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.uich-tw .running {
  animation-play-state: running;
}
.uich-tw .paused {
  animation-play-state: paused;
}
.uich-tw .\[-ms-overflow-style\:none\] {
  -ms-overflow-style: none;
}
.uich-tw .\[scrollbar-width\:none\] {
  scrollbar-width: none;
}
.uich-tw .file\:border-0::file-selector-button {
  border-width: 0px;
}
.uich-tw .file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.uich-tw .file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uich-tw .file\:font-medium::file-selector-button {
  font-weight: 500;
}
.uich-tw .file\:text-foreground::file-selector-button {
  color: hsl(var(--foreground));
}
.uich-tw .placeholder\:text-muted-foreground::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}
.uich-tw .placeholder\:text-muted-foreground::placeholder {
  color: hsl(var(--muted-foreground));
}
.uich-tw .last\:border-0:last-child {
  border-width: 0px;
}
.uich-tw .focus-within\:outline-none:focus-within {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.uich-tw .focus-within\:ring-1:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .focus-within\:ring-ring:focus-within {
  --tw-ring-color: hsl(var(--ring));
}
.uich-tw .hover\:border-destructive:hover {
  border-color: hsl(var(--destructive));
}
.uich-tw .hover\:border-foreground:hover {
  border-color: hsl(var(--foreground));
}
.uich-tw .hover\:border-input:hover {
  border-color: hsl(var(--input));
}
.uich-tw .hover\:border-ring:hover {
  border-color: hsl(var(--ring));
}
.uich-tw .hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
}
.uich-tw .hover\:bg-accent\/40:hover {
  background-color: hsl(var(--accent) / 0.4);
}
.uich-tw .hover\:bg-accent\/50:hover {
  background-color: hsl(var(--accent) / 0.5);
}
.uich-tw .hover\:bg-destructive\/80:hover {
  background-color: hsl(var(--destructive) / 0.8);
}
.uich-tw .hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}
.uich-tw .hover\:bg-foreground\/\[0\.06\]:hover {
  background-color: hsl(var(--foreground) / 0.06);
}
.uich-tw .hover\:bg-muted:hover {
  background-color: hsl(var(--muted));
}
.uich-tw .hover\:bg-muted\/40:hover {
  background-color: hsl(var(--muted) / 0.4);
}
.uich-tw .hover\:bg-muted\/50:hover {
  background-color: hsl(var(--muted) / 0.5);
}
.uich-tw .hover\:bg-primary:hover {
  background-color: hsl(var(--primary));
}
.uich-tw .hover\:bg-primary\/80:hover {
  background-color: hsl(var(--primary) / 0.8);
}
.uich-tw .hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}
.uich-tw .hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--secondary) / 0.8);
}
.uich-tw .hover\:bg-transparent:hover {
  background-color: transparent;
}
.uich-tw .hover\:text-\[\#171717\]:hover {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}
.uich-tw .hover\:text-accent-foreground:hover {
  color: hsl(var(--accent-foreground));
}
.uich-tw .hover\:text-destructive:hover {
  color: hsl(var(--destructive));
}
.uich-tw .hover\:text-foreground:hover {
  color: hsl(var(--foreground));
}
.uich-tw .hover\:text-muted-foreground:hover {
  color: hsl(var(--muted-foreground));
}
.uich-tw .hover\:text-primary-foreground:hover {
  color: hsl(var(--primary-foreground));
}
.uich-tw .hover\:underline:hover {
  text-decoration-line: underline;
}
.uich-tw .hover\:no-underline:hover {
  text-decoration-line: none;
}
.uich-tw .hover\:opacity-100:hover {
  opacity: 1;
}
.uich-tw .hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .focus\:border-solid:focus {
  border-style: solid;
}
.uich-tw .focus\:border-ring:focus {
  border-color: hsl(var(--ring));
}
.uich-tw .focus\:bg-accent:focus {
  background-color: hsl(var(--accent));
}
.uich-tw .focus\:bg-accent\/60:focus {
  background-color: hsl(var(--accent) / 0.6);
}
.uich-tw .focus\:text-accent-foreground:focus {
  color: hsl(var(--accent-foreground));
}
.uich-tw .focus\:text-destructive:focus {
  color: hsl(var(--destructive));
}
.uich-tw .focus\:text-foreground:focus {
  color: hsl(var(--foreground));
}
.uich-tw .focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.uich-tw .focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}
.uich-tw .focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.uich-tw .focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.uich-tw .focus-visible\:ring-0:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}
.uich-tw .focus-visible\:ring-offset-0:focus-visible {
  --tw-ring-offset-width: 0px;
}
.uich-tw .focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.uich-tw .focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}
.uich-tw .active\:cursor-grabbing:active {
  cursor: grabbing;
}
.uich-tw .disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.uich-tw .disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.uich-tw .disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.uich-tw :is(.group:hover .group-hover\:-translate-y-0\.5) {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw :is(.group:hover .group-hover\:translate-x-0\.5) {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw :is(.group:hover .group-hover\:bg-foreground\/20) {
  background-color: hsl(var(--foreground) / 0.2);
}
.uich-tw :is(.group:hover .group-hover\:opacity-100) {
  opacity: 1;
}
.uich-tw :is(.peer:disabled ~ .peer-disabled\:cursor-not-allowed) {
  cursor: not-allowed;
}
.uich-tw :is(.peer:disabled ~ .peer-disabled\:opacity-70) {
  opacity: 0.7;
}
.uich-tw .data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.uich-tw .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}
.uich-tw .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}
.uich-tw .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.uich-tw .data-\[state\=on\]\:border-transparent[data-state="on"] {
  border-color: transparent;
}
.uich-tw .data-\[state\=unchecked\]\:border-muted-foreground\/40[data-state="unchecked"] {
  border-color: hsl(var(--muted-foreground) / 0.4);
}
.uich-tw .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(var(--primary));
}
.uich-tw .data-\[state\=on\]\:bg-accent[data-state="on"] {
  background-color: hsl(var(--accent));
}
.uich-tw .data-\[state\=on\]\:bg-card[data-state="on"] {
  background-color: hsl(var(--card));
}
.uich-tw .data-\[state\=on\]\:bg-foreground[data-state="on"] {
  background-color: hsl(var(--foreground));
}
.uich-tw .data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(var(--accent));
}
.uich-tw .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: hsl(var(--input));
}
.uich-tw .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  color: hsl(var(--muted-foreground));
}
.uich-tw .data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(var(--foreground));
}
.uich-tw .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(var(--primary-foreground));
}
.uich-tw .data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: hsl(var(--accent-foreground));
}
.uich-tw .data-\[state\=on\]\:text-background[data-state="on"] {
  color: hsl(var(--background));
}
.uich-tw .data-\[state\=on\]\:text-foreground[data-state="on"] {
  color: hsl(var(--foreground));
}
.uich-tw .data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: hsl(var(--accent-foreground));
}
.uich-tw .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: hsl(var(--muted-foreground));
}
.uich-tw .data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.uich-tw .data-\[state\=on\]\:shadow-sm[data-state="on"] {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.uich-tw .data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.uich-tw .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.uich-tw .data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.uich-tw .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.uich-tw .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.uich-tw .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}
.uich-tw .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}
.uich-tw .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}
.uich-tw .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}
.uich-tw .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}
.uich-tw .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}
.uich-tw .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}
.uich-tw .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}
@media (min-width: 640px) {
  .uich-tw .sm\:max-w-2xl {
    max-width: 42rem;
  }
  .uich-tw .sm\:max-w-md {
    max-width: 28rem;
  }
  .uich-tw .sm\:shrink-0 {
    flex-shrink: 0;
  }
  .uich-tw .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .uich-tw .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .uich-tw .sm\:flex-row {
    flex-direction: row;
  }
  .uich-tw .sm\:items-center {
    align-items: center;
  }
  .uich-tw .sm\:justify-end {
    justify-content: flex-end;
  }
  .uich-tw .sm\:justify-between {
    justify-content: space-between;
  }
  .uich-tw :is(.sm\:space-x-2 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-x-reverse: 0;
    margin-left: calc(0.5rem * var(--tw-space-x-reverse));
    margin-right: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }
  .uich-tw .sm\:rounded-lg {
    border-radius: var(--radius);
  }
  .uich-tw .sm\:p-6 {
    padding: 1.5rem;
  }
  .uich-tw .sm\:p-8 {
    padding: 2rem;
  }
  .uich-tw .sm\:px-6 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .uich-tw .sm\:text-left {
    text-align: right;
  }
}
@media (min-width: 768px) {
  .uich-tw .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .uich-tw .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .uich-tw .lg\:w-\[38\%\] {
    width: 38%;
  }
  .uich-tw .lg\:flex-row {
    flex-direction: row;
  }
  .uich-tw :is(.lg\:divide-x > :not([hidden]) ~ :not([hidden])) {
    --tw-divide-x-reverse: 0;
    border-left-width: calc(1px * var(--tw-divide-x-reverse));
    border-right-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }
  .uich-tw :is(.lg\:divide-y-0 > :not([hidden]) ~ :not([hidden])) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }
}
@media (min-width: 1280px) {
  .uich-tw .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.uich-tw .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}
.uich-tw :is(.\[\&\>\[data-state\=checked\]\]\:\!translate-x-3>[data-state=checked]) {
  --tw-translate-x: 0.75rem !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.uich-tw :is(.\[\&\>\[data-state\=unchecked\]\]\:bg-muted-foreground>[data-state=unchecked]) {
  background-color: hsl(var(--muted-foreground));
}
.uich-tw :is(.\[\&\>span\]\:line-clamp-1>span) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.uich-tw :is(.\[\&\>span\]\:\!size-3>span) {
  width: 0.75rem !important;
  height: 0.75rem !important;
}
.uich-tw :is(.\[\&\>svg\]\:size-4>svg) {
  width: 1rem;
  height: 1rem;
}
.uich-tw :is(.\[\&\>svg\]\:shrink-0>svg) {
  flex-shrink: 0;
}
.uich-tw :is(.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg) {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw :is(.\[\&_svg\]\:pointer-events-none svg) {
  pointer-events: none;
}
.uich-tw :is(.\[\&_svg\]\:size-2\.5 svg) {
  width: 0.625rem;
  height: 0.625rem;
}
.uich-tw :is(.\[\&_svg\]\:size-3 svg) {
  width: 0.75rem;
  height: 0.75rem;
}
.uich-tw :is(.\[\&_svg\]\:size-3\.5 svg) {
  width: 0.875rem;
  height: 0.875rem;
}
.uich-tw :is(.\[\&_svg\]\:size-36 svg) {
  width: 9rem;
  height: 9rem;
}
.uich-tw :is(.\[\&_svg\]\:size-4 svg) {
  width: 1rem;
  height: 1rem;
}
.uich-tw :is(.\[\&_svg\]\:size-5 svg) {
  width: 1.25rem;
  height: 1.25rem;
}
.uich-tw :is(.\[\&_svg\]\:size-8 svg) {
  width: 2rem;
  height: 2rem;
}
.uich-tw :is(.\[\&_svg\]\:size-\[18px\] svg) {
  width: 18px;
  height: 18px;
}
.uich-tw :is(.\[\&_svg\]\:shrink-0 svg) {
  flex-shrink: 0;
}

/*
 * shadcn/ui design tokens, shared by BOTH bundles.
 *
 * Split out of shadcn.css so the dashboard can reuse the tokens WITHOUT
 * `@tailwind base`. Preflight is a global reset (bare `*`, `body`, `h1`…`p`
 * selectors), so pulling shadcn.css into the dashboard bundle would reset the
 * whole wp-admin page, WordPress's own admin menu and admin bar included.
 * The composer bundle still loads preflight; it owns its panel.
 *
 * Deliberately UNLAYERED (the `@layer base { … }` wrapper was removed): an
 * unlayered rule beats every layered one regardless of source order, and
 * `@layer base` requires an `@tailwind base` for Tailwind to hoist it into –
 * which is exactly what the dashboard bundle omits. UiChemy's own brand.css
 * relies on the same unlayered-wins behaviour.
 *
 * Every declaration is scoped to `.uich-tw`, so these tokens only apply inside
 * a Tailwind island and never touch the host page.
 */
/*
 * shadcn/ui theme, zinc base, verbatim from the shadcn registry.
 * Variables are declared on `.uich-tw` (not :root) so the theme travels with
 * the composer host and portal roots without touching Elementor's document.
 * Dark mode: add `dark` to the same element (or any ancestor inside the scope).
 */
.uich-tw {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 91%;              /* soft hairline, matches native rgba(0,0,0,.09) */
  /* Input/control outline. shadcn's stock 90% is nearly invisible on the
     white panel (inputs read as "unboxed" in light mode), so darken the
     control outline specifically, dividers keep the softer --border above. */
  --input: 240 5% 80%;
  --ring: 240 10% 3.9%;
  /* Corner rounding for shadcn controls (buttons, inputs, popovers, cards,
     segmented tabs). Kept tight/modern, rounded-lg≈6px, md≈4px, sm≈2px –
     rather than the earlier airy 0.8rem which read as over-rounded. */
  --radius: 0.4rem;
  /* Semantic category colors (construct markers etc.), Tailwind palette
     hues at 600 for light backgrounds, per shadcn convention. */
  --status-data: 221 83% 53%;      /* blue-600 */
  --status-loop: 262 83% 58%;      /* violet-600 */
  --status-condition: 32 95% 44%;  /* amber-600 */
  --status-form: 142 76% 36%;      /* green-600 */
}

.uich-tw.dark,
.uich-tw .dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
  /* 500-grade hues read better on dark surfaces. */
  --status-data: 217 91% 60%;      /* blue-500 */
  --status-loop: 258 90% 66%;      /* violet-500 */
  --status-condition: 38 92% 50%;  /* amber-500 */
  --status-form: 142 71% 45%;      /* green-500 */
}

/*
 * ELEMENTOR SKIN (shadcn tokens), matches the EDITOR ONE (Elementor v4)
 * panel exactly. Values are the Editor One design tokens (--e-one-palette-*)
 * from the installed plugin (v4.1.4):
 *   light → elementor/assets/css/modules/editor-one/theme-light.css
 *   dark  → elementor/assets/css/modules/editor-one/theme-dark.css
 * Editor One uses translucent action/divider overlays rather than solid
 * greys; where a shadcn token must be a solid HSL (borders, hover/selected
 * surfaces), it carries the overlay composited over the panel background.
 * Light: bg #fff · txt #3f444b · hi #0c0d0e · tertiary #69727d · border
 *        #A7AAAD · divider #e0e0e0 · accent #f0abfc.
 * Dark : bg #1f2124 · txt #babfc5 · hi #fff · tertiary #9da5ae · disabled
 *        #515962 · divider≈#3a3c3e · selected≈#434547 · accent #f0abfc.
 * Accent is the Editor One pink primary (#f0abfc) with dark contrast text
 * (#0c0d0e). Applied via `.skin-elementor` on the same `.uich-tw` host that
 * carries `.dark`, so it composes with the light/dark toggle. Radius = 3px.
 */
.uich-tw.skin-elementor {
  --background: 0 0% 100%;         /* #ffffff background-default */
  --foreground: 215 9% 27%;        /* #3f444b text-secondary */
  --card: 0 0% 100%;
  --card-foreground: 215 9% 27%;
  --popover: 0 0% 100%;
  --popover-foreground: 215 9% 27%;
  --primary: 291 93% 83%;          /* #f0abfc primary-main */
  --primary-foreground: 210 8% 5%; /* #0c0d0e primary-contrast-text */
  --secondary: 0 0% 96%;           /* #f5f5f5 action-hover over #fff */
  --secondary-foreground: 215 9% 27%;
  --muted: 0 0% 96%;               /* #f5f5f5 */
  --muted-foreground: 213 9% 45%;  /* #69727d text-tertiary */
  --accent: 0 0% 92%;              /* #ebebeb action-selected over #fff */
  --accent-foreground: 210 8% 5%;  /* #0c0d0e text-primary */
  --destructive: 0 72% 51%;        /* #dc2626 error-main */
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 88%;              /* #e0e0e0 divider (rgba(0,0,0,.12)) */
  --input: 210 3% 67%;             /* #A7AAAD border (control outlines) */
  --ring: 291 93% 83%;             /* #f0abfc */
  --radius: 6px;  /* Editor One: rounded-md controls = 4px, rounded-lg = 6px */
  --status-data: 217 78% 53%;      /* #2563eb info-main */
  --status-loop: 291 93% 83%;      /* #f0abfc primary-main */
  --status-condition: 24 73% 42%;  /* #bb5b1d warning-main (light) */
  --status-form: 158 86% 28%;      /* #0a875a success-main */
}

.uich-tw.skin-elementor.dark {
  --background: 216 7% 13%;        /* #1f2124 background-default */
  --foreground: 213 9% 75%;        /* #babfc5 text-secondary */
  --card: 216 7% 13%;              /* #1f2124 */
  --card-foreground: 213 9% 75%;
  --popover: 210 5% 20%;           /* #313336 action-hover over #1f2124 */
  --popover-foreground: 213 9% 75%;
  --primary: 291 93% 83%;          /* #f0abfc primary-main */
  --primary-foreground: 210 8% 5%; /* #0c0d0e primary-contrast-text */
  --secondary: 210 5% 20%;         /* #313336 */
  --secondary-foreground: 213 9% 75%;
  --muted: 210 5% 20%;             /* #313336 */
  --muted-foreground: 212 9% 65%;  /* #9da5ae text-tertiary */
  --accent: 210 5% 27%;            /* #434547 action-selected over #1f2124 */
  --accent-foreground: 0 0% 100%;  /* #ffffff text-primary */
  --destructive: 0 72% 51%;        /* #dc2626 error-main */
  --destructive-foreground: 0 0% 100%;
  --border: 210 3% 24%;            /* #3a3c3e divider (rgba(255,255,255,.12)) */
  --input: 210 5% 27%;             /* #434547 (rgba(255,255,255,.16)) */
  --ring: 291 93% 83%;             /* #f0abfc */
  --radius: 6px;  /* Editor One: rounded-md controls = 4px, rounded-lg = 6px */
  --status-data: 217 78% 53%;      /* #2563eb info-main */
  --status-loop: 291 93% 83%;      /* #f0abfc primary-main */
  --status-condition: 38 92% 50%;  /* #f59e0b warning-main */
  --status-form: 158 86% 28%;      /* #0a875a success-main */
}

/*
 * Scoped replacement for Tailwind preflight (preflight is disabled globally
 * so it can't reset Elementor's editor DOM).
 */
.uich-tw,
.uich-tw *,
.uich-tw *::before,
.uich-tw *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: hsl(var(--border));
}

.uich-tw {
  /* Unified with the dashboard shell: the island renders in the design-system
     font (Zalando Sans via --uc-font-sans), not its own Plus Jakarta Sans, so
     text looks the same across native and builder screens. The literal Zalando
     fallback keeps it correct even if the token isn't in scope. */
  font-family: var(--uc-font-sans, "Zalando Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}

/* No semibold, for now: fold Tailwind's font-semibold utility to Medium so no
   text in the island renders at 600. Routed through the DS weight token, so
   flipping it back is a one-line change (see --uc-weight-semibold). */
.uich-tw .font-semibold {
  font-weight: var(--uc-weight-medium, 500) !important;
}

/* Elementor skin: match the Editor One panel type exactly, Roboto at 14px
   base (--e-one-typography-fontFamily / fontSize). Deliberately kept on Roboto
   (the editor panel stays as-is); only the Brand skin follows the unified font
   above. Higher specificity than the base .uich-tw rule. */
.uich-tw.skin-elementor {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
}

.uich-tw h1, .uich-tw h2, .uich-tw h3, .uich-tw h4, .uich-tw h5, .uich-tw h6,
.uich-tw p, .uich-tw ul, .uich-tw ol, .uich-tw figure, .uich-tw blockquote {
  margin: 0;
  padding: 0;
}

.uich-tw ul, .uich-tw ol {
  list-style: none;
}

.uich-tw button, .uich-tw input, .uich-tw optgroup, .uich-tw select, .uich-tw textarea {
  font: inherit;
  color: inherit;
  margin: 0;
  /* NOTE: intentionally NOT zeroing `padding` here. This reset is (0,1,1)
     specificity, which beat every custom component class (`.gp-type-tab`,
     `.bp-dd-btn`, …) at (0,1,0) and silently stripped their left/right
     padding, controls looked cramped in many places. Tailwind utility
     buttons still get their padding (utilities are `.uich-tw`-scoped at
     (0,2,0) via `important:'.uich-tw'`), and fixed-size icon buttons use
     border-box + centered content, so leaving padding alone is safe. */
  background: transparent;
}

.uich-tw button, .uich-tw [role='button'] {
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

.uich-tw button:disabled {
  cursor: default;
}

.uich-tw img, .uich-tw svg, .uich-tw video, .uich-tw canvas {
  display: block;
  max-width: 100%;
}

.uich-tw a {
  color: inherit;
  text-decoration: inherit;
}

.uich-tw [hidden] {
  display: none;
}

/*
 * Composer SKIN TOKENS — the single source of the palette.
 *
 * Imported by BOTH bundles: the composer panel (index.jsx) and the canvas
 * (canvas-entry.js, which PHP enqueues into the Elementor preview). That shared
 * import is the whole reason this file exists.
 *
 * The on-canvas toolbar used to hard-code this palette as literals, because it
 * renders in a document these tokens never reached. Hand-copying is not the same
 * as matching: alongside the real values it grew a dozen invented in-between
 * shades — #f1f1f3, #2c2e33, #e6e6e9 — that appear nowhere in the panel. Panel,
 * dock and toolbar now read the SAME declarations, so a colour changed here
 * changes all three and they cannot drift apart again.
 *
 * Moved verbatim out of composer.css. No value was altered.
 */

/* Elementor skin, dark variant (default; = Editor One "Dark" UI theme) */
[data-uich-composer-skin="elementor"] {
  /* AI mark in Elementor's own pink family — the same pair the canvas
     selection chrome uses (ACCENT_LINE #d946ef, composer-box-handles.js). */
  --ai-glyph-from: #f5d0fe;
  --ai-glyph-to: #d946ef;
  --bg-canvas: #0c0d0e;
  /* background-paper (top chrome / outer) */
  --bg-canvas-ink: #babfc5;
  /* text-secondary */
  --panel-bg: #1f2124;
  /* background-default */
  --panel-bg-2: #313336;
  /* action-hover over panel */
  --panel-bg-3: #434547;
  /* action-selected over panel */
  --panel-bg-4: #4b4d51;
  /* action-focus+ / chip */
  --panel-line: #3a3c3e;
  /* divider (rgba(255,255,255,.12)) */
  --panel-line-2: #434547;
  /* stronger divider (rgba(255,255,255,.16)) */
  --text-hi: #ffffff;
  /* text-primary */
  --uich-text: #babfc5;
  /* text-secondary */
  --text-mid: #9da5ae;
  /* text-tertiary */
  --text-dim: #515962;
  /* text-disabled */
  --accent-2: hsl(var(--primary));
  --accent-rgb: 240, 171, 252;
  /* #f0abfc primary-main */
  --accent-bg: rgba(var(--accent-rgb), 0.22);
  --brand-green: #0a875a;
  /* success-main */
  --uich-danger: #dc2626;
  /* error-main */
  --ok: #0a875a;
  --warn: #f59e0b;
  /* warning-main */
  --radius: 6px;
  /* Editor One: cards ~6px */
  --radius-sm: 4px;
  /* Editor One: inputs/controls 4px */
}

[data-uich-composer-skin="elementor"][data-uich-composer-theme="light"] {
  --bg-canvas: #f1f2f3;
  /* outer canvas grey */
  --bg-canvas-ink: #0c0d0e;
  --panel-bg: #ffffff;
  /* background-default */
  --panel-bg-2: #f5f5f5;
  /* action-hover over #fff */
  --panel-bg-3: #ebebeb;
  /* action-selected over #fff */
  --panel-bg-4: #e0e0e0;
  /* divider (rgba(0,0,0,.12)) */
  --panel-line: #e0e0e0;
  /* divider (rgba(0,0,0,.12)) */
  --panel-line-2: #a7aaad;
  /* border (control outlines) */
  --text-hi: #0c0d0e;
  /* text-primary */
  --uich-text: #3f444b;
  /* text-secondary */
  --text-mid: #69727d;
  /* text-tertiary */
  --text-dim: #9da5ae;
  /* text-disabled */
  --accent-2: hsl(var(--primary));
  --accent-rgb: 240, 171, 252;
  /* #f0abfc primary-main */
  --accent-bg: rgba(var(--accent-rgb), 0.14);
  --brand-green: #0a875a;
  /* success-main */
  --uich-danger: #dc2626;
  /* error-main */
  --ok: #0a875a;
  --warn: #bb5b1d;
  /* warning-main (light) */
  --radius: 6px;
  /* Editor One: cards ~6px */
  --radius-sm: 4px;
  /* Editor One: inputs/controls 4px */
}

/* Gutenberg skin, dark variant (the block editor's own dark UI): the dark theme
   applies to its own inverted chrome: #1e1e1e base, #2f2f2f raised.

   NOTE, and worth remembering: this header's opening delimiter went missing when
   the skin palettes were extracted into this file, which left a dangling closing
   delimiter sitting right above the selector. That is a parse error, and a CSS
   parser recovers from it by discarding the rule that follows — so this ENTIRE
   token block was silently dead, and the Gutenberg skin inherited the :root
   (UiChemy) palette instead: --accent-rgb measured 255,255,255 rather than
   56,88,233, and --radius 0.4rem rather than 4px.

   Never write the two-character comment terminator inside a comment body while
   describing this, either. Doing so ends the comment early, turns the remaining
   prose into garbage declarations, and drops the next rule for the very same
   reason. Describe the delimiters in words. */
[data-uich-composer-skin="gutenberg"] {
  /* AI mark in wp-admin blue — #3858e9 is the same --wp-admin-theme-color
     this skin already uses for --accent-rgb, plus a lighter step to run
     the gradient from. */
  --ai-glyph-from: #a8c4ff;
  --ai-glyph-to: #3858e9;
  --bg-canvas: #1e1e1e;
  --bg-canvas-ink: #e0e0e0;
  --panel-bg: #1e1e1e;
  --panel-bg-2: #2f2f2f;
  /* hover */
  --panel-bg-3: #404040;
  /* selected */
  --panel-bg-4: #4a4a4a;
  /* raised chip */
  --panel-line: #404040;
  --panel-line-2: #545454;
  --text-hi: #ffffff;
  --uich-text: #e0e0e0;
  --text-mid: #949494;
  --text-dim: #757575;
  --accent-2: hsl(var(--primary));
  --accent-rgb: 56, 88, 233;
  /* #3858e9 --wp-admin-theme-color */
  /* WP's ToggleGroupControl is a 2px-radius track with 2px items; the softer
     9px/7px pill would be the one un-WordPress thing in a WordPress sidebar. */
  --seg-radius: 4px;
  --seg-radius-inner: 2px;
  --accent-bg: rgba(var(--accent-rgb), 0.24);
  --brand-green: #4ab866;
  /* admin success */
  --uich-danger: #cc1818;
  /* admin error */
  --ok: #4ab866;
  --warn: #f0b849;
  /* admin warning */
  --radius: 4px;
  /* WP popovers/menus = 4px */
  --radius-sm: 2px;
  /* WP controls = 2px */
}

[data-uich-composer-skin="gutenberg"][data-uich-composer-theme="light"] {
  --bg-canvas: #f0f0f0;
  /* the editor's canvas grey behind the content column */
  --bg-canvas-ink: #1e1e1e;
  --panel-bg: #ffffff;
  --panel-bg-2: #f0f0f0;
  /* hover */
  --panel-bg-3: #e0e0e0;
  /* selected */
  --panel-bg-4: #dddddd;
  --panel-line: #e0e0e0;
  /* divider */
  --panel-line-2: #949494;
  /* control outline */
  --text-hi: #1e1e1e;
  --uich-text: #1e1e1e;
  --text-mid: #757575;
  --text-dim: #949494;
  --accent-2: hsl(var(--primary));
  --accent-rgb: 56, 88, 233;
  /* #3858e9 */
  --accent-bg: rgba(var(--accent-rgb), 0.08);
  --brand-green: #4ab866;
  --uich-danger: #cc1818;
  --ok: #4ab866;
  --warn: #f0b849;
  --radius: 4px;
  /* WP popovers/menus = 4px */
  --radius-sm: 2px;
  /* WP controls = 2px */
}

/*
 * 'Plus Jakarta Sans' and 'Roboto' are bundled locally and declared via
 * @font-face in assets/css/uichemy-composer-editor-panel.css, which is always
 * enqueued alongside this composer build in the editor. They are NOT imported
 * from Google Fonts here, so the plugin makes no external network request for
 * fonts. (Roboto is used only by the Elementor skin so the composer's type
 * matches the Elementor editor panel exactly.)
 */

:root {
  --bg-canvas: #f4f4f6;
  --bg-canvas-ink: #15151a;
  --panel-bg: #15161a;
  --panel-bg-2: #1c1d22;
  --panel-bg-3: #24262c;
  --panel-bg-4: #2d2f37;
  --panel-line: #2a2c33;
  --panel-line-2: #34363f;
  /* Segmented controls — ONE language for every tabbing in the panel: a GREY
     track with a lighter GREY active chip on top of it. Both values are neutral
     overlays rather than ramp steps, so the track lifts off whatever panel it
     sits on (brand #15161a, Elementor #1f2124, Gutenberg #1e1e1e) and the chip
     lifts off the track by the same kind of step again, in every skin, without
     six per-skin copies. The light theme states its own pair below.
     The track was a black wash first (rgba(0,0,0,.28), recessed below the
     panel). On a near-black panel that made the whole control disappear —
     nothing to see until you found the one lit chip. A lift reads as a real
     surface holding the tabs, which is what the reference does too.
     Before this, the families disagreed: the Chat/Editor strip ran a GREY track
     with a near-black active tab (inverted), .seg / .state-tabs / .responsive-tabs
     ran a light wash track with a lighter chip, and .mode-seg filled the active
     half solid white. Three languages for the same control. */
  --seg-track: rgba(255, 255, 255, 0.06);
  /* NO BORDERS on this control, by decision — the track and the chip are told
     apart by tone alone. Both hairline tokens stay in place (and stay wired to
     the inset rings in composer-dock.css) so bringing an edge back is a value
     change here rather than an edit to nine selectors; `transparent` is the
     off switch. Track edges came off first: once the track went lighter than
     the panel it already had an edge of its own and the hairline drew a second
     one beside it. */
  --seg-track-line: transparent;
  --seg-thumb: rgba(255, 255, 255, 0.10);
  /* Off — see --seg-track-line. The chip is now read from its fill and the soft
     shadow under it, nothing drawn round the outside. */
  --seg-thumb-line: transparent;
  --seg-thumb-hover: rgba(255, 255, 255, 0.045);
  /* Softer than before: with a hairline doing the lifting, a heavy drop shadow
     doubles the edge and muddies it. */
  --seg-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  /* Segmented radii, deliberately softer than the panel's 6px/4px container
     scale — a tab track is a pill, not a card, and at 6px the track read as a
     small rectangle. The inner value keeps the classic 2px inset so the chip's
     arc sits concentric inside the track's. Skins whose host has its own
     geometry re-point these (see the Gutenberg block, which is WP's 4px/2px). */
  --seg-radius: 9px;
  --seg-radius-inner: 7px;
  /* MINIMAL surfaces. A control is defined by its FILL and by the space around
     it; a 1px line is the exception. Two values only:
       --min-line  the one line colour left, for a STRUCTURAL boundary against
                   something outside the panel (its own outer edge). Never for
                   internal chrome.
       --min-fill  what replaces a border on a control — a soft wash that reads
                   as a surface without drawing an edge.
     Both are neutral greys on purpose, the convention already used by --ctl-*
     further down: a mid grey at low alpha darkens a light panel and lightens a
     dark one, so one value is correct in both themes and every skin. That
     matters here because the OLD lines were a single token too (#e8e8e8 light /
     #27272a dark) and it did not carry — near-invisible on black, a hard rule on
     white. Light was the case that had never been checked. */
  /* The AI mark (the empty-state sparkle) is the ONE place a brand colour is
     wanted in the composer, and it follows the ACTIVE SKIN's own accent. This is
     the UiChemy skin's value: brand ORANGE. Elementor and Gutenberg re-point it
     to their own accents in composer-skin-tokens.css.
     Literal hexes, not rgba(var(--accent-rgb)): that token is white in this skin
     now (the chrome went monochrome), and a white sparkle is not a brand mark. */
  --ai-glyph-from: #FFC574;
  --ai-glyph-to: #FD6A35;
  --min-line: rgba(128, 128, 128, 0.16);
  --min-fill: rgba(128, 128, 128, 0.10);
  --min-fill-hover: rgba(128, 128, 128, 0.16);
  --text-hi: #f4f5f7;
  --uich-text: #d6d7dc;
  --text-mid: #9a9ca6;
  --text-dim: #6a6c76;
  --accent-2: hsl(var(--primary));
  /* legacy-only name, no shadcn collision */
  /* Interactive accent as an RGB triplet so translucent accent tints (borders,
     glows, hover fills) can be re-skinned in one place.
     MONOCHROME: this was UiChemy indigo (75, 34, 204), which put brand violet
     on every focus ring, selected chip and hover wash in the panel. The panel's
     shadcn layer right next door is already neutral (--primary is #fafafa dark /
     #18181b light, --ring likewise), so the indigo was the one thing making the
     chrome brand-coloured — it read as decoration on top of an otherwise
     black-and-white UI. Now white in dark, near-black in light (see the light
     block below, which must state its own value since it inherits this one).
     Platform skins still re-point it: Elementor keeps Elementor pink, Gutenberg
     keeps the wp-admin blue, because those are the host's accents, not ours. */
  --accent-rgb: 255, 255, 255;
  --accent-bg: rgba(var(--accent-rgb), 0.10);
  --brand-green: #E3ED5D;
  --uich-danger: #ff7a7a;
  --ok: #E3ED5D;
  --warn: var(--warn);
  /* No brand orange anywhere in the composer. These fed the Pro upsell surfaces
     (badge, lock icon, CTA, modal icon, the setup cards' hover border) and were
     the only orange left; they now follow the host skin's own accent, which is
     near-black in a light skin, near-white in a dark one, and the builder's own
     colour where a builder skin is active. Keep it that way: the composer uses
     black/white shades plus whatever the builder skin supplies. */
  --uich-pro-grad: currentColor;
  --uich-pro-tint: rgba(128, 128, 128, 0.10);
  /* Follows the skin rather than pinning a brand colour, for the same reason. */
  --uich-brand: currentColor;
  /* Corner rounding for legacy composer chrome (cards, inputs, chips,
     segmented controls). Tightened from 10/7, the airy rounding read as
     over-rounded, especially on tabs. Colors unchanged. */
  --radius: 6px;
  --radius-sm: 4px;
  --input-h: 30px;
  --row-h: 26px;
}

/* Theme tokens also apply when only the composer host carries data-theme (iframe mount). */
.uich-composer-host {
  color-scheme: dark;
}

.uich-composer-host[data-theme="light"],
[data-uich-composer-theme="light"],
body[data-theme="light"],
.panel[data-theme="light"] {
  color-scheme: light;
}

/* ===== Light theme overrides =====
   Also keyed on `data-uich-composer-theme` so the OUTER shell
   (`#uichemy-composer-floating-panel`, which only carries that attribute, not
   `data-theme`) picks up the light `--panel-line` etc. Otherwise its borders
   (e.g. the right-dock `border-left`) fall back to the dark `:root` tokens and
   render as a black edge in light mode. */
.uich-composer-host[data-theme="light"],
[data-uich-composer-theme="light"],
body[data-theme="light"],
.panel[data-theme="light"] {
  --bg-canvas: #f4f4f6;
  --bg-canvas-ink: #15151a;
  --panel-bg: #ffffff;
  --panel-bg-2: #f7f7fa;
  --panel-bg-3: #eeeef3;
  --panel-bg-4: #e3e3eb;
  --panel-line: #e3e4ec;
  --panel-line-2: #cdcfd8;
  /* Light segmented pair: a light-grey recessed track with a WHITE active chip
     that lifts above it (macOS / iOS / Claude-settings style), rather than a
     darker-grey active. A hairline + soft shadow give the white chip an edge so
     it reads on the pale track. */
  --seg-track: rgba(0, 0, 0, 0.06);
  --seg-track-line: transparent;
  --seg-thumb: #ffffff;
  --seg-thumb-line: rgba(15, 15, 21, 0.06);
  --seg-thumb-hover: rgba(0, 0, 0, 0.04);
  --seg-thumb-shadow: 0 1px 2px rgba(15, 15, 21, 0.10);
  --text-hi: #0f0f15;
  --uich-text: #2a2b33;
  --text-mid: #6a6c76;
  --text-dim: #9a9ca6;
  --accent-2: hsl(var(--primary));
  /* Light counterpart of the monochrome accent — see the note in :root. Without
     this the light panel would inherit white and every focus ring, selected
     chip and hover wash would disappear into the white surface. Matches
     --text-hi so accent and ink are the same black. */
  --accent-rgb: 15, 15, 21;
  --accent-bg: rgba(var(--accent-rgb), 0.07);
  --brand-green: #E3ED5D;
  --uich-danger: #d44a4a;
  --ok: #b3bf3e;
  --warn: #d49a3a;
}

.uich-composer-host[data-theme="light"] .code2-body,
body[data-theme="light"] .code2-body,
.panel[data-theme="light"] .code2-body,
.uich-composer-host[data-theme="light"] .chat2-main,
body[data-theme="light"] .chat2-main,
.panel[data-theme="light"] .chat2-main {
  background: var(--panel-bg-2);
}

/* Scoped light theme overrides for portaled elements.
   These popups portal to document.body, which carries data-uich-composer-theme
   (set by applyTheme) rather than data-theme, so match on both attributes. */
body[data-theme="light"] .upill-list,
body[data-theme="light"] .suggest,
body[data-theme="light"] .cpicker,
body[data-theme="light"] .prop-applied-tip,
body[data-theme="light"] .layer-menu,
body[data-uich-composer-theme="light"] .upill-list,
body[data-uich-composer-theme="light"] .suggest,
body[data-uich-composer-theme="light"] .cpicker,
body[data-uich-composer-theme="light"] .prop-applied-tip,
body[data-uich-composer-theme="light"] .layer-menu {
  --bg-canvas: #f4f4f6;
  --bg-canvas-ink: #15151a;
  --panel-bg: #ffffff;
  --panel-bg-2: #f7f7fa;
  --panel-bg-3: #eeeef3;
  --panel-bg-4: #e3e3eb;
  --panel-line: #e3e4ec;
  --panel-line-2: #cdcfd8;
  --text-hi: #0f0f15;
  --uich-text: #2a2b33;
  --text-mid: #6a6c76;
  --text-dim: #9a9ca6;
  --accent-2: hsl(var(--primary));
  --accent-bg: rgba(var(--accent-rgb), 0.10);
  --brand-green: #E3ED5D;
  --uich-danger: #d44a4a;
  --ok: #b3bf3e;
  --warn: #d49a3a;
  color-scheme: light;
}

/* =====================================================================
   ELEMENTOR SKIN, second color version (legacy composer tokens)
   ---------------------------------------------------------------------
   Palette matches the EDITOR ONE (Elementor v4) panel. Values are the
   Editor One design tokens (--e-one-palette-*) shipped in the installed
   plugin (v4.1.4):
     dark  → elementor/assets/css/modules/editor-one/theme-dark.css
     light → elementor/assets/css/modules/editor-one/theme-light.css
   Editor One uses translucent action/divider overlays; the solid values
   below are those overlays composited over the panel background.
   Dark (Editor One "Dark" panel):
     bg-default #1f2124  paper #0c0d0e  hover≈#313336  selected≈#434547
     txt #babfc5  tertiary #9da5ae  disabled #515962  primary/hi #ffffff
     divider≈#3a3c3e
   Light (Editor One "Light" panel):
     bg #ffffff  hover #f5f5f5  selected #ebebeb  divider #e0e0e0
     border #a7aaad  txt #3f444b  tertiary #69727d  disabled #9da5ae
     primary/hi #0c0d0e
   Shared: accent #f0abfc (primary-main, dark contrast text #0c0d0e),
     danger #dc2626, success #0a875a, radius 3px.
   Applied when the host/shell/body carries data-uich-composer-skin="elementor".
   Layout is untouched, only colors + corner radius change; the skin honors
   the existing light/dark toggle.
   ===================================================================== */

/* Skin palette (elementor / gutenberg, dark + light) moved to
   composer-skin-tokens.css — shared with the canvas bundle so the panel,
   the dock and the on-canvas toolbar cannot drift apart. */

/* Elementor skin, light variant (= Elementor "Light" UI theme).
   Keyed on BOTH data-theme (host/shell/panel) and data-uich-composer-theme
   (the outer shell + document body only carry the latter), so portaled
   legacy chrome mounted on <body>, e.g. the dynamic-value picker, also
   picks up the light Elementor tokens instead of falling back to dark. */
[data-uich-composer-skin="elementor"][data-theme="light"],
/* Skin palette (elementor / gutenberg, dark + light) moved to
   composer-skin-tokens.css — shared with the canvas bundle so the panel,
   the dock and the on-canvas toolbar cannot drift apart. */

/* =====================================================================
   GUTENBERG SKIN, legacy `--panel-*` chrome tokens (titlebar, tabs, canvas
   toolbar, scrollbars). Sibling of the Elementor skin above: the shadcn tokens
   live in shadcn.css under `.skin-gutenberg`, these drive the older hand-rolled
   chrome, and both are switched together by applySkin(). Colours are
   WordPress's own (see the shadcn.css header for provenance).
   Layout is untouched, only colours + corner radius change; the skin honours
   the existing light/dark toggle.
   ===================================================================== */

/* Skin palette (elementor / gutenberg, dark + light) moved to
   composer-skin-tokens.css — shared with the canvas bundle so the panel,
   the dock and the on-canvas toolbar cannot drift apart.

   The two orphaned lines that used to sit here were the top of the Gutenberg
   dark block's header, left behind when that block was cut out: its comment was
   never closed, so the parser swallowed everything up to the next closing
   delimiter. It happened not to cost a rule here, but it left the file's comment
   delimiters unbalanced, which makes any later balance check useless. */

/* Gutenberg skin, light variant (the real block-editor look). Keyed on BOTH
   data-theme and data-uich-composer-theme for the same reason as the Elementor
   skin: the outer shell and body only ever carry the latter, so portaled legacy
   chrome would otherwise fall back to the dark tokens. */
[data-uich-composer-skin="gutenberg"][data-theme="light"],
/* Skin palette (elementor / gutenberg, dark + light) moved to
   composer-skin-tokens.css — shared with the canvas bundle so the panel,
   the dock and the on-canvas toolbar cannot drift apart. */

/* Gutenberg skin, control TYPE, matched to the block editor's own components.
   Values verified against the emotion styles shipped in
   wp-includes/js/dist/components.min.js (they aren't in any static stylesheet):
   a control label there is `font-size: 11px; font-weight: 500 (fontWeightMedium);
   line-height: 1.4` with NO colour of its own, it inherits the panel's primary
   text (#1e1e1e), not a grey. Ours were 10.5px in the muted grey.

   NOTE: WordPress's own rule also carries `text-transform: uppercase`, which we
   deliberately DON'T copy. Shouting every label (FONT FAMILY, LINE HEIGHT) is
   hard to scan down a long inspector, and it mangles the mixed-case terms this
   panel is full of, CSS, HTML, ID, AI. Sentence case reads better and keeps
   those correct. */
[data-uich-composer-skin="gutenberg"] .field.pf .pf-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--uich-text);
}

/* Gutenberg: no SHOUTING labels anywhere in the composer.
   The panel carries ~50 hand-rolled `text-transform: uppercase` rules on small
   labels (spacing sides, sub-section titles, shadow/colour-picker labels, quick
   tags, global markers…). All-caps is hard to scan down a long inspector and it
   mangles the mixed-case terms this panel is full of, CSS, HTML, ID, AI.
   Neutralised in one place rather than by editing those 50 rules, because they
   are shared with Elementor and Bricks, which must stay pixel-identical.
   Scoped to the BUILDER stamp, not the colour skin, so the casing holds even if
   the user toggles the palette to Brand.
   `!important` is required, not lazy: the individual rules carry higher
   specificity (e.g. `.four-side label`) than any sane ancestor selector here. */
body[data-uich-builder="gutenberg"] .uich-composer-host * {
  text-transform: none !important;
}
/* Hex codes are the one place caps genuinely help, they read as values, not
   prose, and mixed-case hex looks like a typo. Opt them back in. */
body[data-uich-builder="gutenberg"] .uich-composer-host .cpk-hex,
body[data-uich-builder="gutenberg"] .uich-composer-host .cpicker-hex,
body[data-uich-builder="gutenberg"] .uich-composer-host .swatch-input-global-hex,
body[data-uich-builder="gutenberg"] .uich-composer-host .swatch-input input {
  text-transform: uppercase !important;
}

/* Gutenberg skin, input border states, matched to the block editor's own
   control tokens (read from the components theme in components.min.js, where the
   grey scale is 900 #1e1e1e / 700 #757575 / 600 #949494 / 400 #ccc):
     border         gray[600]  #949494   ← already our --input
     borderHover    gray[700]  #757575
     borderFocus    accent     #3858e9   ← already our --ring
     borderDisabled gray[400]  #ccc
   The default and focus colours already matched; the HOVER darken did not exist
   in our panel at all, and it's a big part of why WP's controls feel responsive.
   Applied to the control frame, the shadcn wrapper pattern puts the border on a
   `.border-input` parent, standalone controls carry it themselves. */
[data-uich-composer-skin="gutenberg"] .field.pf .border-input:hover,
[data-uich-composer-skin="gutenberg"] .field.pf input:hover,
[data-uich-composer-skin="gutenberg"] .field.pf select:hover,
[data-uich-composer-skin="gutenberg"] .field.pf textarea:hover {
  border-color: var(--text-mid);
}
[data-uich-composer-skin="gutenberg"] .field.pf .border-input:has(:disabled),
[data-uich-composer-skin="gutenberg"] .field.pf input:disabled,
[data-uich-composer-skin="gutenberg"] .field.pf select:disabled,
[data-uich-composer-skin="gutenberg"] .field.pf textarea:disabled {
  border-color: #ccc;
}

/* Gutenberg skin, give the Layers toggle a real control frame.
   It ships as a borderless ghost icon button, which leaves it reading as loose
   chrome beside the filled Design/Developer segmented control next to it. In the
   block editor an icon button that toggles a panel is a CONTROL, and WP draws
   those with a frame.
   Reuses the same token ladder as the field controls above rather than inventing
   values, so it tracks the palette and works in both light and dark:
     rest  --panel-line-2  (#949494 light, WP gray-600, its control outline)
     hover --text-mid      (#757575 light, WP gray-700, its borderHover)
   2px is WP's own control radius (`radiusSmall`), matching the treatment already
   given to the prompt box and the code panes. The button is `h-7 w-7` and shadcn
   sets `box-sizing: border-box`, so the frame costs no size, it stays 28×28 and
   nothing in the header row reflows. */
[data-uich-composer-skin="gutenberg"] .panel-layers-btn {
  border: 1px solid var(--panel-line-2);
  border-radius: 2px;
}
[data-uich-composer-skin="gutenberg"] .panel-layers-btn:hover {
  border-color: var(--text-mid);
}

/* Gutenberg skin, the Chat empty state ("What do you want to do?").
   This card deck was the last thing in the panel still wearing brand colours,
   and two bits bypassed the skin tokens entirely:
     · the sparkles disc hardcoded rgba(99,102,241,.18) / #a5b4fc, Tailwind
       INDIGO, so no palette switch could ever reach it;
     · the featured card drew a blue→purple→amber gradient border.
   Both are re-pointed at the admin accent (#3858e9 via --accent-rgb), and the
   cards take WP's own control geometry: 2px radius instead of 12px, 13px text
   instead of 14px, #fff surface with an #f0f0f0 hover, #ddd border.
   The vertical rhythm is compacted too, 40px of top padding plus a 56px disc
   plus a 36px title margin is a lot of empty sidebar before the first option. */
[data-uich-composer-skin="gutenberg"] .ai-setup {
  padding: 16px 12px;
}
[data-uich-composer-skin="gutenberg"] .ai-setup-title {
  margin: 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
}
[data-uich-composer-skin="gutenberg"] .ai-setup-row {
  font-size: 13px;
}
[data-uich-composer-skin="gutenberg"] .ai-setup-row-ico,
[data-uich-composer-skin="gutenberg"] .ai-setup-ctx-ico {
  color: hsl(var(--primary));
}
/* The front-end theme's `button:hover { color }` turns the row label invisible
   (only the coloured icon survives). Pin the text dark on hover; !important so
   the theme can't win regardless of stylesheet load order. */
[data-uich-composer-skin="gutenberg"] .ai-setup-row:hover,
[data-uich-composer-skin="gutenberg"] .ai-setup-row:hover .ai-setup-row-label,
[data-uich-composer-skin="gutenberg"] .ai-setup-more:hover {
  color: var(--text-hi) !important;
}

/* The last two components that hardcode the same Tailwind indigo tint instead of
   reading a token, a pending dependency row and the Layers "add custom" row.
   Re-pointed at the admin accent so nothing in the panel can still show indigo
   under this skin. Scoped, so Elementor and Bricks keep their brand tint. */
[data-uich-composer-skin="gutenberg"] .dep.dep-pending {
  background: rgba(var(--accent-rgb), 0.04);
}
[data-uich-composer-skin="gutenberg"] .dep.dep-pending:hover {
  background: rgba(var(--accent-rgb), 0.07);
}
[data-uich-composer-skin="gutenberg"] .layer-add-row-custom {
  background: rgba(var(--accent-rgb), 0.05);
}
[data-uich-composer-skin="gutenberg"] .layer-add-row-custom:hover {
  background: rgba(var(--accent-rgb), 0.10);
}

/* Gutenberg skin, pick mode reads as an inline NOTICE, not a modal scrim.
   The base design is `position: absolute; inset: 0` with a 40%-black backdrop
   blur. Two problems here: it's a modal idiom dropped into a light WP sidebar,
   and because it covers its nearest positioned ancestor, the chat, which is
   content-height in the inspector, it could only ever dim PART of the panel and
   ended in a hard grey edge with white space below it.
   Critically, the base overlay is `pointer-events: none`: it blocks nothing and
   is purely decorative dimming. So nothing functional is lost by turning it into
   what WordPress would use, a compact accent-tinted notice, in normal flow,
   sitting directly above the prompt box (its DOM position already). */
[data-uich-composer-skin="gutenberg"] .pick-overlay {
  /* OUT OF FLOW. This is the whole point: entering pick or draw mode must not
     resize the conversation or move the prompt box. An earlier version used
     `position: static` for an inline notice, which put it in the flex column
     between the transcript and the compose bar, so the transcript lost ~100px
     and everything below it slid down every time you clicked Pick.
     `.chat2-main` is the containing block (it is `position: relative`), and its
     top edge is the Widget/Page scope row, so the offset below drops the notice
     onto the transcript instead of over that row. `.chat-status` is 8px padding +
     a ~34px control + 8px padding + a 1px border. */
  position: absolute;
  top: 45px;
  right: 0;
  left: 0;
  bottom: auto;
  z-index: 3;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin: 10px 14px;
  padding: 10px 12px;
  border: 1px solid hsl(var(--primary));
  border-radius: var(--radius-sm);
  /* Opaque now that it floats ON TOP of the conversation rather than sitting
     between elements, a 6%-alpha tint alone would let the dimmed messages bleed
     through and turn the notice to mush. Layered as a gradient over the panel
     surface so it stays one opaque paint. */
  background:
    linear-gradient(rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0.06)),
    var(--panel-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  backdrop-filter: none;
  text-align: right;
  /* Hard stop so it can never reach the CONTEXT row or the prompt box, even at
     the panel's minimum height. Scrolls rather than clips, so Done / Cancel stay
     reachable in that corner case. */
  max-height: 35%;
  overflow-y: auto;
  /* The base overlay is `pointer-events: none`, decorative dimming only. This
     one carries the Done / Cancel buttons, so it has to receive clicks. */
  pointer-events: auto;
}
/* Gutenberg skin, the CONTEXT row is a FIXED single row.
   The transcript takes the panel's slack (`flex: 1 1 auto`), so anything that
   makes the compose bar taller comes straight off the chat. The base row is
   `flex-wrap: wrap`, and two things during pick mode grow it: the button label
   changes "Pick" → "Picking…" (~20px wider), and each picked element adds a
   `.ctx-chip`. In a 320px sidebar either can tip the row onto a second line –
   +34px on the compose bar, -34px off the chat, purely from arming a mode.
   One row always, chips scrolling sideways instead of stacking, so the compose
   bar's height is constant and pick/draw cost the chat nothing. The scrollbar is
   hidden because it would itself add height on some platforms. */
[data-uich-composer-skin="gutenberg"] .composer-ctx {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
[data-uich-composer-skin="gutenberg"] .composer-ctx::-webkit-scrollbar {
  display: none;
}
/* Everything in the row keeps its natural width, without this, `nowrap` squashes
   the buttons instead of scrolling. The spacer is exempt: absorbing the leftover
   space is its whole job, and it must still collapse to 0 when the row fills. */
[data-uich-composer-skin="gutenberg"] .composer-ctx > *:not(.composer-ctx-spacer) {
  flex: 0 0 auto;
}

/* Gutenberg skin, no targeting banner WHILE picking.
   `.picked-banner` is a real in-flow row above the transcript, so the moment the
   first element is picked the chat loses ~36px mid-interaction. It is also
   redundant right then: the notice floating over the transcript already reads
   "N selected, click more to add, or click again to remove".
   Hidden only while pick mode is armed. On Done or Cancel the notice goes away
   and the banner takes over as the persistent "Targeting …" record, so the chat
   holds its size for the whole interaction and settles once at the end, rather
   than resizing on every click. */
[data-uich-composer-skin="gutenberg"] .chat2-main.picking .picked-banner {
  display: none;
}

/* The 48px pulsing, shadowed card becomes a plain inline glyph in the accent –
   at notice scale a raised card just reads as clutter. */
[data-uich-composer-skin="gutenberg"] .pick-overlay-cursor {
  width: auto;
  height: auto;
  border-radius: 0;
  margin-top: 1px;
  background: none;
  box-shadow: none;
  animation: none;
  color: hsl(var(--primary));
}
[data-uich-composer-skin="gutenberg"] .pick-overlay-msg {
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  text-align: right;
  font-size: 13px;
  color: var(--text-hi);
}
/* The instruction is a sentence, not a heading, the base markup bolds it. */
[data-uich-composer-skin="gutenberg"] .pick-overlay-msg > b {
  font-weight: 400;
}
[data-uich-composer-skin="gutenberg"] .pick-overlay-btn-row {
  margin-top: 8px;
}

/* History lives in the PROMPT FOOTER under this skin, beside the model picker –
   all chat-scoped controls in one bar, and no row of its own. The button is
   rendered in both places (see the note on ChatComposer's props); these two
   rules are what pick exactly one, so Elementor and Bricks keep the status-bar
   placement untouched. With the chip and this copy both gone, the status bar
   collapses to just the Widget/Page scope pill. */
[data-uich-composer-skin="gutenberg"] .chat-status .chat-status-history {
  display: none;
}
/* …and with the chip and the history button both gone, drop the spacer too.
   `.chat-status` is `flex-wrap: wrap` with an 8px gap, and the only child left is
   the Widget/Page scope pill, which is `w-full`. So the pill fills row one and the
   spacer, a `flex: 1` strut whose entire job was pushing inline items apart –
   wraps onto a row of its OWN: zero content, but it still costs the 8px row gap.
   That was the empty strip under the scope pill (DevTools measured `.chat-status`
   at 53px instead of 45px; the pink hatching was the wrapped row's gap).
   Nothing to space out any more, so it goes. */
[data-uich-composer-skin="gutenberg"] .chat-status .chat-status-spacer {
  display: none;
}
/* Pick / Draw are hidden from the PROMPT BOX. They live in the dock row at the
   bottom of the panel, so a second pair in the prompt footer was the same two
   actions twice, three glyphs into a four-glyph row.

   The buttons are still RENDERED — ChatComposer draws them (the two
   `.composer-foot-ctx` Buttons in the Pro bundle's composer-chat.jsx) and this
   only hides them, which keeps the Pro side untouched. An earlier version of
   this comment claimed the footer copy had been removed from ChatComposer. It
   had not, and still has not.

   `.uich-tw` and `!important` are both load-bearing, not belt-and-braces. These
   are shadcn `Button`s, and that component's base class list opens with
   `inline-flex`, which Tailwind emits as `.uich-tw .inline-flex` — specificity
   (0,2,0). The old bare `.composer-foot-ctx` selector is (0,1,0), so it lost
   every time and the two buttons were still on screen the whole while the rule
   looked correct in the source.

   Scoped to `.composer-foot` so it can only ever reach the prompt-footer pair.
   The CONTEXT-row originals carry the same class in the Gutenberg skin and must
   stay visible there. */
.uich-tw .composer-foot .composer-foot-ctx {
  display: none !important;
}

/* Send becomes a square icon-only button using the paper-plane glyph. The word
   "Send" plus the ⌘↵ hint cost real width in a 320px column, and the shortcut
   still works whether or not it's printed on the button.
   Both glyphs ship in the markup (see the note on the button); these rules pick
   one, so Elementor and Bricks keep the labelled button with its own icon. */
.send-ico-plane {
  display: none;
}
[data-uich-composer-skin="gutenberg"] .send-ico-plane {
  display: inline-flex;
}
[data-uich-composer-skin="gutenberg"] .send-ico-default,
[data-uich-composer-skin="gutenberg"] .composer-send-label {
  display: none;
}
[data-uich-composer-skin="gutenberg"] .composer-send {
  /* Square, and matching the height of the other footer icon buttons. */
  width: 28px;
  height: 28px;
  padding: 0;
  gap: 0;
  flex: 0 0 auto;
}
/* The button's own `[&_svg]:size-3` utility pins every icon inside it to 12px,
   which is fine for a glyph sitting next to a label but too small for one
   standing alone. Let the plane render at its own 14px. */
[data-uich-composer-skin="gutenberg"] .composer-send .send-ico-plane {
  width: 14px;
  height: 14px;
}

/* Gutenberg, scope becomes a compact dropdown in the prompt's CONTEXT row
   (beside Pick/Draw), so hide the segmented Widget/Page status bar. The dropdown
   (`.composer-ctx-scope`) is display:none elsewhere, so Elementor/Bricks keep the
   toggle in the status bar exactly as before. */
[data-uich-composer-skin="gutenberg"] .chat-status {
  display: none;
}
.composer-ctx-scope {
  display: none;
}
[data-uich-composer-skin="gutenberg"] .composer-ctx-scope {
  display: inline-flex;
  /* Push Pick/Draw to the right edge of the CONTEXT row. */
  margin-left: auto;
}
/* Scope dropdown styled as a native WordPress SelectControl: white field,
   #949494 (var(--input)) 1px outline at WP's 2px radius, #1e1e1e text, and the
   #3858e9 focus ring. Tokens adapt to light/dark. */
.scope-dd {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 8px;
  border-radius: 2px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: inset 0 0 0 1px hsl(var(--input));
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow .15s ease;
}
.scope-dd:hover {
  box-shadow: inset 0 0 0 1px hsl(var(--foreground));
}
.scope-dd:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px hsl(var(--ring)), 0 0 0 1px hsl(var(--ring));
}
/* The front-end theme's button :hover/:focus/:active can tint this plain
   <button> pink, Tailwind preflight is bare in the composer, so those theme
   styles leak in. Pin the chip's interactive background to the neutral field so
   no theme colour shows, and keep the Gutenberg accent (--primary/--ring =
   #3858e9) on the outline + ring. Skin-scoped and higher-specificity so it beats
   the theme rule. */
[data-uich-composer-skin="gutenberg"] .scope-dd:hover,
[data-uich-composer-skin="gutenberg"] .scope-dd:focus,
[data-uich-composer-skin="gutenberg"] .scope-dd:focus-visible,
[data-uich-composer-skin="gutenberg"] .scope-dd:active {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
[data-uich-composer-skin="gutenberg"] .scope-dd:hover {
  box-shadow: inset 0 0 0 1px hsl(var(--primary));
}
[data-uich-composer-skin="gutenberg"] .scope-dd:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px hsl(var(--ring)), 0 0 0 1px hsl(var(--ring));
}
.scope-dd > svg:last-child {
  color: hsl(var(--muted-foreground));
}

/* Elementor/Bricks status-bar variant: the Widget/Page scope is a MINIMAL,
   FIXED-WIDTH dropdown (converted from the old segmented tabs). Scoped to
   `.chat-status` so the Gutenberg usage keeps the WP-native bordered chip above.
   [ui-ux] */
.chat-status .scope-dd {
  /* order:1 sorts it after the flex spacer, so it sits in the right corner
     while the history button stays on the left. */
  order: 1;
  width: 118px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  box-shadow: inset 0 0 0 1px hsl(var(--border));
}
.chat-status .scope-dd:hover {
  background: transparent;
  box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.32);
}
.chat-status .scope-dd:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px hsl(var(--ring)), 0 0 0 3px hsl(var(--ring) / 0.18);
}
/* label fills the middle so the chevron pins to the right edge at a fixed width */
.chat-status .scope-dd > span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-status .scope-dd > svg {
  flex-shrink: 0;
}

/* ── Front-end theme button-colour leak (the stray pink) ─────────────────────
   The live site's theme styles bare <button> :hover/:focus/:active backgrounds,
   and the composer runs with bare Tailwind preflight, so those colours leak onto
   plain composer buttons, the pink on the segmented tab controls. A plain reset
   lost the cascade to the theme (it out-orders/out-specifies ours), so pin it
   HARD with !important, scoped to `.section-tabs` where ONLY these seg tabs live
   (no shadcn buttons, so nothing intended is harmed). Inactive tabs stay
   transparent over the muted track; the active one keeps its white surface –
   its re-assert block is ordered AFTER so it wins the tie for `bg-background`
   buttons. Covers the HTML/CSS/JS/Globals code-scope row. */
.uich-composer-host .section-tabs button:hover,
.uich-composer-host .section-tabs button:focus,
.uich-composer-host .section-tabs button:active {
  background-color: transparent !important;
}
.uich-composer-host .section-tabs button[class*="bg-background"],
.uich-composer-host .section-tabs button[class*="bg-background"]:hover,
.uich-composer-host .section-tabs button[class*="bg-background"]:focus,
.uich-composer-host .section-tabs button[class*="bg-background"]:active {
  background-color: hsl(var(--background)) !important;
}

/* Gutenberg, the scope dropdown shares this row with Pick/Draw, so drop their
   text labels and make them compact icon buttons (tooltips still convey intent).
   Elementor/Bricks keep the labelled buttons. */
[data-uich-composer-skin="gutenberg"] .composer-ctx .ctx-btn-label {
  display: none;
}
[data-uich-composer-skin="gutenberg"] .composer-ctx .ctx-action-btn {
  width: 28px;
  padding-right: 0;
  padding-left: 0;
  gap: 0;
}

/* Gutenberg skin, panel header (the Designer/Developer + History row).
   No rule under this row: the Editor/Chat/Code strip directly below already has
   its own top edge, so a border here read as a second line boxing the buttons
   in. Padding only. */
[data-uich-composer-skin="gutenberg"] .panel.dock-right .tab-tools {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 16px;
  padding-left: 12px;
}

/* Gutenberg skin, Editor/Chat/Code tabs. WP's own sidebar tabs ("Post" /
   "Block") are a single text row: 13px medium, inline icon, active = primary
   text + the accent underline (the underline itself already comes from the
   base `.panel-tab.active::after`, which uses --primary = #3858e9 here). The
   stacked icon-above-label layout is Elementor's pattern, so flatten it for
   this skin and drop the tall 58px bar to WP's 48px. */
[data-uich-composer-skin="gutenberg"] .panel.dock-right .panel-tabs {
  min-height: 48px;
  background: var(--panel-bg);
}
[data-uich-composer-skin="gutenberg"] .panel.dock-right .panel-tab {
  flex-direction: row;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}
[data-uich-composer-skin="gutenberg"] .panel.dock-right .panel-tab.active {
  color: var(--text-hi);
}

/* Layers toggle injected into WP's settings-sidebar header (Page/Block + ✕ row).
   The node sits outside the composer host. `margin-left:auto` pushes it to the
   right edge of the flex row so it hugs the close button (the injection code also
   zeroes the close button's own auto margin, so the two sit flush with just this
   4px gap between them). */
.uich-gb-header-slot {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  margin-left: 4px;
}

/* Gutenberg: Designer/Developer as WordPress's own ToggleGroupControl, a
   #949494-outlined track at WP's 2px radius, the selected tab filled with the
   dark #1e1e1e backdrop + white text (the native block-editor segmented look).
   Only rendered under this skin (see modeSwitch); tokens adapt to light/dark. */
.mode-seg {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: 2px;
  background: hsl(var(--background));
  box-shadow: inset 0 0 0 1px hsl(var(--input));
  overflow: hidden;
}
/* Fill the left side of the header row (History stays pinned right). */
[data-uich-composer-skin="gutenberg"] .panel.dock-right .tab-tools .mode-seg {
  flex: 1;
}
.mode-seg-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 0;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  /* Equal halves so the two tabs fill the track. */
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mode-seg-btn:hover {
  background: hsl(var(--muted));
}
.mode-seg-btn.on,
.mode-seg-btn.on:hover {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
}
/* The front-end theme's `button { color }` / `button:hover` can override the
   inactive segment (preflight is bare), that's what turned "Developer" into
   near-invisible light-grey text. Re-assert the readable tokens per state,
   skin-scoped + higher-specificity so the theme rule can't win. */
[data-uich-composer-skin="gutenberg"] .mode-seg-btn {
  color: hsl(var(--foreground));
  background: transparent;
}
[data-uich-composer-skin="gutenberg"] .mode-seg-btn:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--muted));
}
[data-uich-composer-skin="gutenberg"] .mode-seg-btn.on,
[data-uich-composer-skin="gutenberg"] .mode-seg-btn.on:hover {
  color: hsl(var(--background));
  background: hsl(var(--foreground));
}

/* Gutenberg skin, section headers (Content / Typography / Layout …). The block
   editor's panel toggle is 13px / weight 500 in primary text on a 16px gutter;
   ours was 12.5px / 600 in muted grey. Only type, colour and the horizontal
   gutter change, the vertical padding (and so the stack's overall density)
   is deliberately left alone. */
[data-uich-composer-skin="gutenberg"] .panel.dock-right .acc-head {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-hi);
  padding-right: 16px;
  padding-left: 16px;
}

* {
  box-sizing: border-box;
}

/*
 * wp-admin forms.css neutraliser (Gutenberg editor).
 *
 * WordPress loads wp-admin/css/forms.css via load-styles.php in the block
 * editor. Its bare attribute selectors, `input[type=text], select, textarea`
 * (specificity 0,1,1), force a grey `border:1px solid #949494`,
 * `min-height:40px`, `padding:0 12px` and `border-radius:2px` onto the
 * composer's shadcn inputs. Two-part fix:
 *   1. tailwind.config `important:'.uich-tw'` raises every utility to 0,2,0 so
 *      the shadcn controls that DO carry their own frame (standalone <Input> /
 *      <Textarea> / <Select>, incl. per-instance h-7/px-2 overrides) win.
 *   2. This reset (specificity 0,1,2 via `body … :is()`) sits ABOVE wp-admin
 *      (0,1,1) but BELOW those utilities (0,2,0). It strips wp-admin's chrome
 *      from the wrapper-pattern inner inputs (which are meant to be unstyled –
 *      their frame lives on a parent .border-input wrapper) without touching
 *      controls that style themselves through utilities.
 * Scoped to `.uich-tw`, so nothing outside the composer surface is affected.
 */
body .uich-tw :is(input, select, textarea) {
  min-height: 0;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
}
/*
 * wp-admin's focus rule `input[type=text]:focus { border-color:#2271b1;
 * box-shadow:0 0 0 1px #2271b1; outline:… }` (specificity 0,2,1) even outranks
 * the important-scoped utilities (0,2,0), so a focused inner input shows a stray
 * blue WordPress ring. This override (0,2,2 via `body … :focus`) clears it so the
 * shadcn ring shows instead, for the wrapper-pattern inputs that comes from the
 * parent's `focus-within:ring-*`; the standalone <Input>'s own `focus-visible:
 * ring-*` (0,3,0) still outranks this and is left intact.
 */
body .uich-tw :is(input, select, textarea):focus,
body .uich-tw :is(input, select, textarea):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: none;
  border-color: transparent;
}

/* Standalone stage page ONLY, the dev harness that opens the panel on its own
   page (see the body[data-panel-only] block further down). Nothing the plugin
   ships sets that attribute, so none of this applies in a builder or on the
   front end.

   These were bare `html, body` rules until now, which meant the composer
   stylesheet repainted the HOST PAGE: on the front end `body` picked up the
   panel's canvas background and ink (a dark page under the dark theme) and,
   worse, `overflow: hidden`, which stops the page scrolling anywhere the
   front-end composer loads. The panel itself is position:fixed and needs none
   of it. */
body[data-panel-only] {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--bg-canvas);
  color: var(--bg-canvas-ink);
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  overflow: hidden;
}

/* ------- Stage shell so the panel sits in context ------- */
.stage {
  height: 100vh;
  display: grid;
  grid-template-rows: 44px 1fr auto;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar canvas"
    "panel panel";
  background: var(--bg-canvas);
}

.topbar {
  grid-area: topbar;
  background: #0f1014;
  border-bottom: 1px solid #000;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  color: #6b6d77;
  font-size: 12px;
}

.topbar .logo {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(-135deg, #2a2c33, var(--panel-bg));
  display: grid;
  place-items: center;
  color: #4a4c55;
  font-weight: 700;
}

.topbar .crumb {
  color: #9a9ca6;
}

.topbar .crumb .sep {
  color: #3a3c45;
  margin: 0 8px;
}

.topbar-spacer {
  flex: 1;
}

.topbar .pill {
  border: 1px solid #2a2c33;
  border-radius: 999px;
  padding: 4px 10px;
  color: #8a8c95;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.topbar .pill.brand {
  border-color: rgba(var(--accent-rgb), 0.5);
  color: hsl(var(--primary));
  background: rgba(var(--accent-rgb), 0.08);
}

.sidebar {
  grid-area: sidebar;
  background: #fff;
  border-left: 1px solid #e5e6eb;
  padding: 14px 14px;
  font-size: 12px;
  color: #6a6c76;
}

.sidebar h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: #9a9ca6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar .nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar .nav a {
  text-decoration: none;
  color: #3a3b44;
  padding: 6px 8px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.sidebar .nav a.active {
  background: #f0eefb;
  color: hsl(var(--primary));
}

.sidebar .nav .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cdcfd6;
}

.sidebar .nav a.active .dot {
  background: hsl(var(--primary));
}

.canvas-wrap {
  grid-area: canvas;
  overflow: auto;
  padding: 28px 32px;
}

.doc {
  max-width: 980px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e5e6eb;
  border-radius: 10px;
  padding: 56px 64px;
  color: var(--panel-bg);
  min-height: 100%;
  box-shadow: 0 2px 24px rgba(20, 21, 26, 0.04);
}

.doc h1 {
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  font-weight: 700;
}

.doc h1 .sel {
  background: rgba(var(--accent-rgb), 0.14);
  outline: 1.5px solid var(--accent-2);
  border-radius: 2px;
  padding: 0 4px;
}

.doc p {
  color: #5b5d66;
  max-width: 60ch;
  line-height: 1.55;
  margin: 0 0 18px;
}

.doc .row {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.doc .btn-p {
  background: var(--panel-bg);
  color: white;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
}

.doc .btn-s {
  background: white;
  color: var(--panel-bg);
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid #d9dade;
}

.doc .ph {
  margin-top: 32px;
  height: 220px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(-135deg, #f3f3f6 0 14px, #ececf1 14px 28px);
  display: grid;
  place-items: center;
  color: #9a9ca6;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

/* ============================================================ */
/*                  THE COMPOSER PANEL ITSELF                   */
/* ============================================================ */
.panel {
  grid-area: panel;
  background: var(--panel-bg);
  color: var(--uich-text);
  color-scheme: inherit;
  height: 420px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--panel-line);
  position: relative;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.30);
}

.uich-composer-host[data-theme="light"] .panel,
.uich-composer-host[data-theme="light"] .panel {
  box-shadow: 0 -8px 28px rgba(15, 15, 21, 0.1);
}

.panel-resize {
  position: absolute;
  top: -3px;
  right: 0;
  left: 0;
  height: 6px;
  cursor: row-resize;
}

.panel-resize::after {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--panel-line-2);
}

/* ---- tab bar ---- */
.panel-tabs {
  display: flex;
  align-items: stretch;
  background: linear-gradient(-180deg, var(--panel-bg-2), var(--panel-bg));
  border-bottom: 1px solid var(--panel-line);
  min-height: 48px;
  padding-left: 0;
}

/* Editor / Chat / Code tabs, a full-width row directly below the top
   Design/Developer switcher bar. Elementor-style: icon stacked above the label,
   small text, equal-width columns. The active indicator points down toward the
   content (default direction). */
.panel-tabs-strip {
  min-height: 46px;
  flex-shrink: 0;
  background: var(--panel-bg-2);
}

.panel-tabs-strip .panel-tab {
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
}

.panel-brand {
  width: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-left: 1px solid var(--panel-line);
  color: hsl(var(--primary));
}

.panel-brand .mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(-135deg, hsl(var(--primary)), hsl(var(--primary)));
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 4px 10px rgba(var(--accent-rgb), 0.35);
}

.panel-tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  color: var(--text-mid);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 8px;
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.panel-tab:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

.panel-tab.active {
  color: var(--text-hi);
  background: var(--panel-bg);
}

.panel-tab.active::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  bottom: -1px;
  height: 2px;
  background: hsl(var(--primary));
  border-radius: 2px 2px 0 0;
}

/* Elementor skin: the active-tab indicator is white (dark) / near-black
   (light), not the accent, matching Elementor's own panel, whose active
   navigation tab uses --e-a-color-txt-accent (#ffffff dark / #0c0d0e light).
   --accent-foreground resolves to exactly those values in the Elementor skin
   (the bridge maps --text-hi to --foreground = #d5d8dc, which is too grey). */
[data-uich-composer-skin="elementor"] .panel-tab.active::after {
  background: hsl(var(--accent-foreground));
}

.panel-tab .badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--panel-bg-3);
  color: var(--text-mid);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

.panel-tab.locked {
  opacity: .5;
}

.tab-tools {
  flex-shrink: 0;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}

/* Collapse / close, separate group so dock layouts can position it apart
   from the tools. In the bottom dock it flows right after .tab-tools. */
.tab-winctl {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 4px;
}

.panel-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: none;
  border: 0;
  color: var(--text-mid);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.panel-icon-btn:hover {
  background: var(--panel-bg-3);
  color: var(--text-hi);
}

.panel-icon-btn.live {
  color: hsl(var(--primary));
}

.panel-theme-toggle {
  border: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
  color: var(--text-mid);
}

.panel-theme-toggle:hover {
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
  color: var(--text-hi);
}

.panel-theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, hsl(var(--primary)) 35%, transparent);
}

/* ---- body layout: Layers (left) + Inspector (right) ---- */
.panel-body {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
}

.layers-col {
  border-left: 1px solid var(--panel-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel-bg-2);
}

.layers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  gap: 8px;
}

.layers-head-left {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.layers-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 20px;
}

/* Layers | History tabs in the floating popup header. */
.layers-tabs { display: inline-flex; align-items: center; gap: 2px; }
.layers-tab {
  border: 0; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; line-height: 20px;
  padding: 2px 8px; border-radius: 6px;
  color: var(--text-lo, rgba(150,150,160,0.9));
}
.layers-tab:hover { color: var(--text-hi); background: var(--surface-2, rgba(128,128,128,0.12)); }
.layers-tab.is-active { color: var(--text-hi); background: var(--surface-2, rgba(128,128,128,0.16)); }

/* History tab body + rows. */
.layers-history-body { flex: 1; min-height: 0; overflow-y: auto; }
.layers-history-row {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: right;
  padding: 7px 14px; border: 0; background: transparent; cursor: pointer; color: var(--text-hi);
}
.layers-history-row:hover { background: var(--surface-2, rgba(128,128,128,0.10)); }
.layers-history-row.is-current { background: rgba(236,8,104,0.16); }
.layers-history-row .lh-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px;
  background: var(--text-lo, rgba(150,150,160,0.5));
}
.layers-history-row .lh-dot.is-current { background: #EC0868; }
.layers-history-row .lh-body { flex: 1; min-width: 0; }
.layers-history-row .lh-label {
  display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.layers-history-row.is-current .lh-label { font-weight: 600; }
.layers-history-row .lh-meta { display: block; font-size: 11px; color: var(--text-lo, rgba(150,150,160,0.7)); }
/* Scope badge (element name / Page / Site) before the label. */
.layers-history-row .lh-scope {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px;
  font-size: 10px; font-weight: 600; line-height: 15px; vertical-align: 1px;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(120,120,140,0.22); color: var(--text-hi);
}
/* View-only rows: another element's history — can't restore until it's selected. */
.layers-history-row.is-viewonly { cursor: default; opacity: 0.72; }
.layers-history-row.is-viewonly:hover,
.layers-history-row.is-viewonly.is-current { background: transparent; }
.layers-history-row.is-viewonly.is-current .lh-label { font-weight: 400; }
.layers-history-row.is-viewonly .lh-scope { background: rgba(120,120,140,0.14); }

.layers-search {
  /* Breathing room between the "Layers" head and the search field. */
  padding: 8px 14px 10px;
}

.layers-search .input {
  height: 28px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  color: var(--text-mid);
  font-size: 12px;
  transition: border-color .12s;
}

.layers-search .input:hover,
.layers-search .input:focus-within {
  border-color: var(--panel-line-2);
}

.layers-search input,
.layers-search input:focus,
.layers-search input:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.layers-search input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: none;
  border: none !important;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 12px;
  width: 100%;
}

.layers-search input::-moz-placeholder {
  color: var(--text-dim);
}

.layers-search input::placeholder {
  color: var(--text-dim);
}

.layers-tree {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 14px 8px;
}

.layer-row {
  display: flex;
  align-items: center;
  gap: 3px;
  height: var(--row-h);
  padding: 0 2px 0 4px;
  color: var(--uich-text);
  font-size: 12px;
  border-radius: 5px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
}

.layer-row:hover {
  background: var(--panel-bg-3);
}

.layer-row.selected {
  background: var(--panel-bg-4);
  color: var(--text-hi);
  box-shadow: inset 0 0 0 1px var(--panel-line-2);
}

.layer-row.selected .ltag {
  color: var(--uich-text);
}

.layer-row .lcaret {
  width: 10px;
  height: 14px;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  opacity: .9;
  flex-shrink: 0;
}

.layer-row .lcaret.empty {
  display: none;
}

.layer-row .licon {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  color: var(--text-mid);
  flex-shrink: 0;
}

.layer-row .ltag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mid);
  flex-shrink: 0;
  margin-left: 6px;
  line-height: 1.4;
  padding-bottom: 2px;
}

.layer-row .lname {
  color: var(--uich-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  line-height: 1.4;
  padding-bottom: 2px;
}

/* Dynamic-data markers on a layer row (data / loop / condition / form). Each is
   a small coloured dot; click removes that construct. Was previously unstyled
   (0×0, invisible), these rules make the indicator actually show. */
.layer-row .ldots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  flex-shrink: 0;
}
.layer-row .ldot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  border-radius: 9999px;
  transition: background-color .12s;
}
.layer-row .ldot:hover {
  background: var(--muted, rgba(127, 127, 127, .18));
}
.layer-row .ldot-core {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}

.layer-row .lvis {
  width: 18px;
  opacity: 0;
  transition: opacity .12s;
  color: var(--text-mid);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.layer-row:hover .lvis,
.layer-row.selected .lvis {
  opacity: 1;
}

.layer-row .lmore {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  color: var(--text-mid);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
}

.layer-row:hover .lmore,
.layer-row.selected .lmore {
  opacity: 1;
}

.layer-row .lmore:hover {
  color: var(--text-hi);
  background: var(--panel-bg-4);
}

.layer-menu {
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.32), 0 4px 10px -4px rgba(0, 0, 0, 0.22);
  z-index: 1000;
  min-width: 180px;
  padding: 4px;
}

.layer-menu button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 12px;
  text-align: right;
}

.layer-menu button:hover {
  background: var(--panel-bg-3);
}

.layer-menu button.danger {
  color: var(--uich-danger);
}

.layer-menu button.danger:hover {
  background: rgba(255, 122, 122, 0.1);
}

.layer-menu button .kbd {
  margin-right: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-dim);
}

.layer-menu-sep {
  height: 1px;
  background: var(--panel-line);
  margin: 4px 6px;
}

.layer-row.hidden .lname,
.layer-row.hidden .ltag {
  opacity: .45;
}

.layers-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--panel-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-dim);
  font-size: 11px;
  flex-shrink: 0;
}

.layers-foot .btn {
  font-size: 11px;
}

/* ---- inspector ---- */
.inspector {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--panel-bg);
}

.inspector-head {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Carries the element's identity and actions: the tag selector, Attributes
     and Mark as. Three controls fit a 320px dock, but a long custom tag
     (`<blockquote>`) next to a Loop / Form badge can exceed it — wrap rather
     than let the row set a floor on the panel's width. */
  flex-wrap: wrap;
  row-gap: 6px;
  min-width: 0;
  padding: 7px 14px;
  border-bottom: 1px solid var(--panel-line);
}

/* Right dock: the Design/Developer tabs take row 1 on their own, and row 2
   carries the tag selector on the left with Mark as pushed to the right edge,
   so the two sit at opposite ends of the row instead of riding the tab row.
   Scoped with :has() to the dock that actually has tabs — in the bottom dock
   `modeSwitch` is null, there is no tab row, and the strip keeps its original
   single-line order (which is already tag-then-Mark-as in source order). */
.inspector-head__tabs {
  flex: 0 0 100%;
  min-width: 0;
}
.inspector-head:has(.inspector-head__tabs) .insp-head-tag {
  order: 1;
  margin-left: auto;
}
.inspector-head:has(.inspector-head__tabs) .insp-head-mark { order: 2; }

.inspector-head .target {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
}

.target-class {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
  white-space: nowrap;
  flex-shrink: 0;
}

.target-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--panel-bg-2);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--panel-line);
  white-space: nowrap;
  flex-shrink: 0;
}

.target .swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(-135deg, hsl(var(--primary)), hsl(var(--primary)));
  flex-shrink: 0;
}

.target .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
}

.target .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mid);
  background: var(--panel-bg-2);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--panel-line);
}

/* Tag modify, pencil button + inline input */
.tag-modify-dd {
  position: relative;
  flex-shrink: 0;
}

.tag-modify-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  opacity: 0.65;
  transition: opacity 0.15s, color 0.15s, background-color 0.15s;
}

.inspector-head .target:hover .tag-modify-btn,
.tag-modify-dd.open .tag-modify-btn {
  opacity: 1;
}

.tag-modify-btn:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
  opacity: 1;
}

.target-tag-editable {
  cursor: text;
}

.target-tag-editable:hover {
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
  color: var(--text-hi);
}

.target-tag-input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-hi);
  background: var(--panel-bg-3);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid hsl(var(--primary));
  outline: none;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 40px;
}

.target-tag-input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Highlight current tag in the modify dropdown */
.layer-add-row.tag-current .layer-add-tag {
  color: var(--text-hi);
}

.layer-add-row.tag-current .layer-add-icon {
  color: var(--text-hi);
}


.state-tabs {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 6px;
}

.state-tabs button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.state-tabs button:hover {
  color: var(--uich-text);
}

.state-tabs button.on {
  background: var(--panel-bg-4);
  color: var(--text-hi);
}

.state-tabs button.on.hover {
  color: var(--warn);
}

.state-tabs button.on.active {
  color: hsl(var(--primary));
}

.responsive-tabs {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 6px;
}

.responsive-tabs button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 26px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-mid);
  display: grid;
  place-items: center;
}

.responsive-tabs button.on {
  background: var(--panel-bg-4);
  color: var(--text-hi);
}

/* Breakpoint dropdown (single button + menu) */
.bp-dd {
  position: relative;
}

.bp-dd-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  color: var(--uich-text);
  height: 28px;
  /* !important defeats Tailwind preflight's `button{padding:0}`, which sits in a
     cascade layer that otherwise beats this unlayered rule on padding. */
  padding: 0 10px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.bp-dd-btn:hover {
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
}

.bp-dd.open .bp-dd-btn {
  background: var(--panel-bg-4);
  color: var(--text-hi);
  border-color: var(--panel-line-2);
}

.bp-dd-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  min-width: 200px;
  max-width: min(280px, 92vw);
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.32), 0 4px 10px -4px rgba(0, 0, 0, 0.22);
  z-index: 50;
  padding: 3px;
}

.bp-dd-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  padding: 5px 8px;
  border-radius: 4px;
  color: var(--uich-text);
  text-align: right;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.bp-dd-row:hover {
  background: var(--panel-bg-3);
}

.bp-dd-row.on {
  background: var(--panel-bg-4);
  color: var(--text-hi);
}

.bp-dd-row.on svg {
  color: var(--text-hi);
}

.bp-dd-row>svg {
  flex-shrink: 0;
}

.bp-dd-line {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

.bp-dd-name {
  flex-shrink: 0;
  font-weight: 500;
  font-size: 11px;
}

.bp-dd-hint {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

.bp-dd-hint::before {
  content: '·';
  margin-left: 6px;
  color: var(--text-dim);
  font-family: inherit;
}

.state-dd-btn {
  gap: 6px;
}

.state-dd-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: hsl(var(--primary) / 0.35);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.22);
}

.bp-dd-menu .bp-dd-row .state-dd-dot {
  margin-right: auto;
}

.uich-composer-host[data-theme="light"] .state-dd-dot,
.uich-composer-host[data-theme="light"] .state-dd-dot {
  background: hsl(var(--primary));
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.16);
}

.inspector-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---- Section tab strip (Typography / Layout / Spacing / …) ---- */
.section-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px 0;
  background: linear-gradient(-180deg, var(--panel-bg-2), var(--panel-bg));
  position: sticky;
  top: 0;
  z-index: 2;
}

.stab-tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  color: var(--text-mid);
  cursor: pointer;
  height: 28px;
  min-width: 32px;
  border-radius: 6px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: padding 0.3s ease, color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.stab-tab:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
  padding: 0 11px;
}

.stab-tab.on {
  background: var(--panel-bg-3);
  color: var(--text-hi);
  border-color: var(--panel-line-2);
  padding: 0 11px;
}

.stab-tab.on .stab-ico {
  color: var(--text-hi);
}

.stab-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stab-label {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  margin-right: 0;
  transition: max-width 0.3s ease, opacity 0.3s ease, margin-right 0.3s ease;
}

.stab-tab:hover .stab-label,
.stab-tab.on .stab-label {
  max-width: 120px;
  opacity: 1;
  margin-right: 6px;
}

/* Inspector section tabs: show every label by default (not just on hover),
   and wrap gracefully if the row is narrower than the tabs. */
.section-tabs.stabs-labeled {
  flex-wrap: wrap;
  row-gap: 6px;
}

.section-tabs.stabs-labeled .stab-tab {
  padding: 0 11px;
}

.section-tabs.stabs-labeled .stab-label {
  max-width: 160px;
  opacity: 1;
  margin-right: 6px;
}

.stab-dot {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--primary));
  box-shadow: 0 0 0 2px var(--panel-bg-2);
}

.stab-tab.on .stab-dot {
  display: none;
}

.stab-spacer {
  flex: 1;
}

.stab-meta {
  font-size: 10.5px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  line-height: 1.4;
}

/* ---- A section: vertical flow of rows + a separate add-prop card ---- */
.section {
  padding: 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prop-rows {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.prop-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: 15px;
  -moz-column-gap: 14px;
       column-gap: 14px;
  align-items: start;
}

.prop-cell {
  min-width: 0;
  position: relative;
}

.section.is-locked,
.prop-cell.is-locked {
  cursor: not-allowed !important;
}

.section.is-locked>*,
.prop-cell.is-locked>* {
  pointer-events: none !important;
  opacity: 0.65;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.prop-cell:focus-within {
  z-index: 4;
}

.prop-cell .select,
.prop-cell .input,
.prop-cell .swatch-input,
.prop-cell .color-field,
.prop-cell .seg,
.prop-cell .combo {
  width: 100%;
}

/* Inside the inspector prop-cell column, let color-input fill the full
     column width (same as every other input). The 200px cap in
     .swatch-input.color-input applies elsewhere (gradient stop pickers etc.)
     and is left intact. */
.prop-cell .swatch-input.color-input {
  max-width: none;
}

.prop-cell .linput input {
  max-width: none;
  flex: 1 1 auto;
}

/* ---- prop-cell: force all inputs to 30px height & 12px font ---- */
.prop-cell .linput {
  height: 30px;
}

.prop-cell .linput input {
  font-size: 12px;
}

.prop-cell .seg button {
  height: 26px;
  font-size: 12px;
}

/* Subsection header, design-conscious rule line */
.subsec {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.subsec-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mid);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.subsec-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, var(--panel-line), transparent);
}

/* ---- Inspector footer ---- */
.inspector-foot {
  height: 36px;
  padding: 0 12px;
  color: var(--text-dim);
  font-size: 11px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Slim status pills (scope · breakpoint · state) — scannable grounding line
   that replaces the old run-on sentence. Existing tokens, shared 6px radius. */
.inspector-foot .foot-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius);
  background: var(--panel-bg-3);
  color: var(--text-mid);
  font-size: 10.5px;
  white-space: nowrap;
}
.inspector-foot .foot-pill b {
  color: var(--text-hi);
  font-weight: 600;
}
.inspector-foot .foot-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--primary));
}

/* ---- Dynamic construct accordion (Loop / Form / …) ----
   Collapsible section pinned to the bottom of the inspector scroll flow,
   replacing the old dedicated construct tab. */
.construct-accordion {
  border-top: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
}

.construct-accordion-head {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-hi);
  transition: background 0.2s ease;
}

.construct-accordion-head:hover {
  background: var(--panel-bg-3);
}

.construct-accordion-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.construct-accordion-title {
  flex: 1 1 auto;
  text-align: right;
}

.construct-accordion-chevron {
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform 0.2s ease;
}

.construct-accordion.is-open .construct-accordion-chevron {
  transform: rotate(-180deg);
}

.construct-accordion-body {
  border-top: 1px solid var(--panel-line);
  padding-bottom: 8px;
}

/* ── Construct panels (Loop / Form / Condition / Data) ────────────────────────
   Redesigned inspector-style layout. Overrides the legacy 2-column grid and
   non-token chrome from assets/css/uich-dd.css; scoped under `.uich-tw` so the
   override always wins on specificity. One clean vertical rhythm, stacked
   full-width fields (no cramped side-by-side controls), grouped sections,
   comfortable checkbox rows, and token-driven colors that track light/dark. */
.uich-tw .uich-construct-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 16px 16px;
  font-family: inherit;
}

/* Info bar showing the Twig this construct emits, a quiet, code-flavored strip
   rather than plain floating text. */
.uich-tw .uich-construct-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: hsl(var(--muted) / 0.4);
  border: 1px solid hsl(var(--border));
  font-size: 11.5px;
  color: hsl(var(--muted-foreground));
}

.uich-tw .uich-construct-head code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: hsl(var(--foreground));
}

.uich-tw .uich-construct-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.uich-tw .uich-construct-pill.loop {
  background: hsl(var(--status-loop) / 0.16);
  color: hsl(var(--status-loop));
}

.uich-tw .uich-construct-pill.condition {
  background: hsl(var(--status-condition) / 0.16);
  color: hsl(var(--status-condition));
}

.uich-tw .uich-construct-pill.form {
  background: hsl(var(--status-form) / 0.16);
  color: hsl(var(--status-form));
}

.uich-tw .uich-construct-pill.data {
  background: hsl(var(--status-data) / 0.16);
  color: hsl(var(--status-data));
}

/* Fields keep the shared `.field.pf` label-above-control chrome so labels and
   inputs sit on one clean axis. Two balanced columns in the wide bottom dock
   (matches the Inspector above it, uses the horizontal space); a single
   full-width column in the narrow right dock, where two columns would cram the
   controls and misalign the ragged select / entity-picker mix. */
.uich-tw .uich-construct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

.uich-tw .panel.dock-right .uich-construct-grid {
  grid-template-columns: 1fr;
}

.uich-tw .uich-construct-grid .field.pf {
  margin: 0;
}

/* Section dividers (Filtering / Published date / …), tie tightly to the fields
   that follow, with clear separation from the group above. */
.uich-tw .subsection.uich-construct-sub {
  margin: 2px 0 -2px;
}

/* Shared composer checkbox.
   ==========================
   Every checkbox in the panel used to be a bare native box carrying nothing but
   `accent-color`. That fails twice. `accent-color` paints ONLY the checked
   state, so an unchecked box fell back to the UA's own square — a dark grey
   chip on a near-black panel, effectively invisible (this is what made the LINK
   toggles look like bare labels). And the colour it painted was
   `hsl(var(--primary))`, the brand magenta, which is not panel chrome: the
   composer's palette is `--panel-*` / `--text-*` only, and the accent is
   reserved for the AI brand mark.

   So the box is drawn here instead, monochrome, from panel tokens — a hairline
   square when off, ink-filled with a knocked-out tick when on. That inverts
   correctly in all four skin/theme combinations with no per-skin rule.

   The selector is `input[type='checkbox'].uich-check` (0,3,1) and the resets
   below are `!important` on purpose: the panel renders inside wp-admin, and
   core forms.css styles checkboxes hard — its own border, background and
   box-shadow, plus a dashicons tick injected through `::before`. Without
   neutralising that ::before, WP's checkmark paints on top of ours. */
.uich-tw input[type='checkbox'].uich-check {
  -moz-appearance: none !important;
       appearance: none !important;
  -webkit-appearance: none !important;
  position: relative;
  flex: none;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--panel-line-2) !important;
  border-radius: 3px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

/* Kill core forms.css's dashicons tick. */
.uich-tw input[type='checkbox'].uich-check::before {
  content: none !important;
  display: none !important;
}

.uich-tw input[type='checkbox'].uich-check:hover:not(:disabled) {
  border-color: var(--text-mid) !important;
}

.uich-tw input[type='checkbox'].uich-check:checked {
  border-color: var(--text-hi) !important;
  background: var(--text-hi) !important;
}

/* The tick: a rotated corner rather than a glyph, so it needs no icon font and
   stays crisp at 14px. Knocked out in the panel colour, so it reads as a hole
   in the ink rather than a mark laid on top. */
.uich-tw input[type='checkbox'].uich-check::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 1px;
  width: 4px;
  height: 7px;
  border: solid var(--panel-bg);
  border-width: 0 0 1.6px 1.6px;
  transform: rotate(-45deg) scale(0.6);
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}

.uich-tw input[type='checkbox'].uich-check:checked::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.uich-tw input[type='checkbox'].uich-check:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--panel-bg), 0 0 0 3px var(--text-mid) !important;
}

.uich-tw input[type='checkbox'].uich-check:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Checkbox rows: comfortable >=32px targets, related options stacked tight. */
.uich-tw .uich-construct-checks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 !important;
}

.uich-tw .uich-construct-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  margin: 0 !important;
  padding: 3px 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  color: hsl(var(--foreground));
  cursor: pointer;
}



/* Custom-query editor (Loop panel, "Custom query" mode). Monospace and full
   width, the expressions this holds are long, and wrapping them mid-argument
   is what makes a hand-written query hard to read. */
.uich-tw .uich-loop-custom {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 9px 10px;
  resize: vertical;
  min-height: 92px;
  border: 1px solid hsl(var(--input));
  border-radius: 6px;
  background: hsl(var(--muted) / 0.35);
  color: hsl(var(--foreground));
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
  white-space: pre-wrap;
  word-break: break-word;
}

.uich-tw .uich-loop-custom:focus-visible {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

.uich-tw .uich-loop-custom::-moz-placeholder {
  color: hsl(var(--muted-foreground) / 0.7);
}

.uich-tw .uich-loop-custom::placeholder {
  color: hsl(var(--muted-foreground) / 0.7);
}

/* Read-only: a query the build can show but not edit (Custom query is Pro).
   Dimmed and not-allowed so it reads as locked, not broken. */
.uich-tw .uich-loop-custom[readonly] {
  opacity: 0.7;
  cursor: not-allowed;
  background: hsl(var(--muted) / 0.55);
}

/* Incomplete expression: a warning, not an error, nothing was written yet. */
.uich-tw .uich-loop-custom-warn {
  margin: -6px 0 8px !important;
  color: hsl(var(--warning, var(--muted-foreground)));
}

/* Helper text: quiet notes, with inline code chips that match the code editor. */
.uich-tw .uich-dd-hint {
  margin: -4px 0 0 !important;
  font-size: 11px;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
}

.uich-tw .uich-dd-hint code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: hsl(var(--muted) / 0.6);
  color: hsl(var(--foreground));
}

/* Remove button already carries destructive styling from JSX; give it room. */
.uich-tw .uich-construct-remove {
  margin-bottom: 2px;
}

/* ── Construct panel: collapsible sub-sections + progressive disclosure ───────
   The Form panel groups its options into lightweight collapsible sections so it
   reads as a few named groups instead of one long scroll; optional and advanced
   fields live behind toggles/reveals. The `--sectioned` body drops the flat
   14px gap so each section owns its own spacing (divider + head/body padding). */
.uich-tw .uich-construct-body--sectioned {
  gap: 0;
}

.uich-tw .uich-construct-section {
  border-top: 1px solid hsl(var(--border) / 0.7);
}

.uich-tw .uich-construct-section:first-of-type {
  border-top: 0;
}

.uich-tw .uich-construct-section-head {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--foreground));
  text-align: right;
}

.uich-tw .uich-construct-section-title {
  flex: 0 0 auto;
}

.uich-tw .uich-construct-section-sum {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-weight: 400;
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}

.uich-tw .uich-construct-section-caret {
  flex: 0 0 auto;
  margin-right: auto;
  color: hsl(var(--muted-foreground));
  opacity: 0.7;
  transition: transform 0.18s ease;
}

.uich-tw .uich-construct-section.is-open .uich-construct-section-caret {
  transform: rotate(-180deg);
}

.uich-tw .uich-construct-section-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 14px;
}

/* On/off switch rows. */
.uich-tw .uich-construct-switches {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.uich-tw .uich-construct-switchrow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
}

.uich-tw .uich-construct-switchrow-label {
  flex: 1 1 auto;
  font-size: 12.5px;
  color: hsl(var(--foreground));
  cursor: pointer;
}

/* Fields revealed by a switch/choice sit in an indented, ruled group so the
   dependency on the control above is obvious. */
.uich-tw .uich-construct-nest {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 2px 0 6px;
  padding-right: 12px;
  border-right: 2px solid hsl(var(--border));
}

.uich-tw .uich-construct-more {
  align-self: flex-start;
  background: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: hsl(var(--primary));
}

.uich-tw .uich-construct-more:hover {
  text-decoration: underline;
}

/* Exclusive choice rows (After submit). */
.uich-tw .uich-construct-radios {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.uich-tw .uich-construct-radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 30px;
  padding: 3px 0;
  background: 100%;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  color: hsl(var(--foreground));
  text-align: right;
}

.uich-tw .uich-construct-radio-dot {
  position: relative;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid hsl(var(--border));
}

.uich-tw .uich-construct-radio.on .uich-construct-radio-dot {
  border-color: hsl(var(--primary));
}

.uich-tw .uich-construct-radio.on .uich-construct-radio-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: hsl(var(--primary));
}

/* Header Remove action, demoted to a quiet icon; destructive only on hover. */
.uich-tw .uich-construct-head-sp {
  flex: 1 1 auto;
}

.uich-tw .uich-construct-head-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  background: 100%;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  transition: color 0.15s ease, background 0.15s ease;
}

.uich-tw .uich-construct-head-act:hover {
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.12);
}

/* Security footnote. */
.uich-tw .uich-construct-foot {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px !important;
}

.uich-tw .uich-construct-foot svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

/* ---- Element header refinements ---- */
.target .slot {
  margin-right: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  text-transform: lowercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.target {
  flex-wrap: nowrap;
  min-width: 0;
}

.target .tag,
.target>span {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Inspector top (element tag · classes · pseudo-state) ----
   Pinned to the top of the scrolling .inspector-body so the "what am I editing"
   context stays visible while the section list scrolls beneath it. Sticky needs
   an opaque background or scrolled content shows through. */
.inspector-top {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--panel-line);
  background: var(--panel-bg);
  flex-shrink: 0;
}

/* Quick tag switch strip, shown for text elements */
.quick-tag-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-bottom: 1px dashed var(--panel-line);
}

.quick-tag-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
  width: 38px;
}

.quick-tag-list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.quick-tag-list::-webkit-scrollbar {
  display: none;
}

.quick-tag-edit-wrapper {
  margin-right: auto;
  display: flex;
  align-items: center;
}

.quick-tag-modify-dd {
  display: inline-flex;
  align-items: center;
}

.quick-tag-modify-dd .quick-tag-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-mid);
  border-color: var(--panel-line);
  background: var(--panel-bg-2);
}

.quick-tag-modify-dd .quick-tag-btn:hover {
  color: var(--text-hi);
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
}

.quick-tag-modify-dd.open .quick-tag-btn {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  background: var(--panel-bg-4);
}

.quick-tag-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 5px;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}

.quick-tag-btn:hover {
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
  color: var(--text-hi);
}

.quick-tag-btn.on {
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
  color: var(--text-hi);
  font-weight: 600;
}

/* APPLIED CLASSES row, label · scrollable chips/add · scope hint */
.applied-compact {
  display: flex;
  /* Two lines: the scopes (tag · Local · classes) on one strip that never
     wraps, and the add field + pseudo-state below it. Splitting them is what
     frees the strip to use the panel's full width. */
  flex-direction: column;
  align-items: stretch;
  /* Never let this row set the panel's width — it's the widest thing in the
     inspector and the panel's host may size itself to its content. */
  min-width: 0;
  padding: 8px 14px;
  /* now also carries the pseudo-state dropdown on its right, so it's the whole
     scope/state header row — close it with a solid hairline. [ui-ux] */
  border-bottom: 1px solid var(--panel-line);
  position: relative;
}

/* Compact pseudo-state dropdown (StateDropdown) — sits on the right of the
   scope/class row so states no longer need a full row of their own. [ui-ux] */
.state-dd {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-hi);
  box-shadow: inset 0 0 0 1px hsl(var(--border));
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow .12s ease;
}
.state-dd:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.32);
}
.state-dd:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.state-dd > svg:last-child {
  color: var(--text-dim);
}

/* Pseudo-state segmented control (StateSegments) — its own full-width row
   directly under the applied classes so Hover / Focus / Active / Disabled are
   always visible, not hidden behind a dropdown. A solid rule closes off the
   selector + state "context header" group from the section list below. */
.state-row {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--panel-line);
}

/* ── Line 1 · the scope strip ────────────────────────────────────────────
   Holds the tag selector, `Local` and every applied class on exactly ONE
   line. Wrapping was rejected because the row's height then changes as you
   move between elements; clipping was rejected because a chip cut mid-word
   reads as a rendering bug. Instead JS folds whatever doesn't fit into the
   `.scope-more` counter, which unlocks horizontal scrolling when clicked. */
.scope-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.scope-lane {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  /* Folded chips are positioned out of flow against this box. */
  position: relative;
  /* The chips must never be able to widen the panel. Without this, a host
     that sizes the panel to its content (Gutenberg's sidebar does) grows to
     fit the whole strip, which changes the width we measure against, which
     changes what we fold — a loop that reads on screen as a flicker. */
  contain: inline-size;
  /* Vertical room for the selected chip's ring, handed straight back to the
     row so the strip's height is unchanged. */
  padding-block: 3px;
  margin-block: -3px;
  padding-inline: 2px;
}

/* `Local` and the first scope chip are never folded away, so on a very narrow
   panel they have to be able to give ground. Only these two may shrink — the
   label inside already truncates — while every chip after them keeps its full
   width and folds into the counter instead. Once the strip is expanded it
   scrolls, so nothing needs to shrink there. */
.scope-lane:not(.is-open) > :nth-child(-n+2) {
  min-width: 0;
  flex-shrink: 1;
}

.scope-lane.is-open {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.scope-lane.is-open > * {
  scroll-snap-align: start;
}
/* No visible bar — it read as a stray underline beneath the chips. */
.scope-lane::-webkit-scrollbar {
  display: none;
}

/* An edge fades only while there really is more content past it, so a
   half-visible chip reads as "keep scrolling" instead of as damage. */
.scope-lane.can-r {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.scope-lane.can-l {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 100%);
}
.scope-lane.can-l.can-r {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

/* One control, two jobs: "+3" while folded, a back-chevron once expanded. */
.scope-more {
  flex: none;
  height: 24px;
  min-width: 28px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--panel-line);
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.scope-more:hover {
  color: var(--text-hi);
  border-color: hsl(var(--foreground) / 0.32);
}
.scope-more[aria-expanded="true"] {
  border-style: solid;
}
/* The scope currently being edited is one of the folded chips — carry the
   selected chip's ring so the row never looks like it's editing nothing. */
.scope-more[data-holds-active="true"] {
  border-style: solid;
  border-color: transparent;
  box-shadow: 0 0 0 1px hsl(var(--ring));
  color: var(--text-hi);
}

/* Away from the base breakpoint the Local chip carries "→ class": an inline
   `style` has no @media, so a value typed there is moved onto a per-element
   class. Saying so on the chip is what stops the edit reading as a failure. */
.scope-chip-note {
  margin-right: 2px;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .01em;
  opacity: .62;
  white-space: nowrap;
}

/* ── Line 2 · add a class, and the pseudo-state ──────────────────────── */
.scope-line-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--panel-line);
}

/* TEXT toggle pill at the end of applied row */
.text-toggle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  line-height: 1;
}

.text-toggle:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
}

.text-toggle.on {
  color: var(--text-hi);
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
}

.applied-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 2px;
  flex-shrink: 0;
}

.chip-scope {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  color: var(--text-mid);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  font-weight: 500;
  flex-shrink: 0;
}

.chip-scope:hover {
  color: var(--uich-text);
  background: var(--panel-bg-3);
}

.chip-scope.on {
  background: var(--panel-bg-3);
  color: var(--text-hi);
  border-color: var(--panel-line-2);
}

.chip-scope.on .dot-cls {
  background: var(--uich-text);
}

.chip-scope.cls {
  padding: 0;
  gap: 0;
}

.chip-scope.is-tag .chip-name {
  font-style: italic;
  opacity: 0.85;
}

.chip-scope.is-tag .dot-cls {
  background: var(--text-dim);
}


.chip-pick {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 8px;
  height: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
}

.chip-x {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  height: 100%;
  width: 22px;
  color: var(--text-dim);
  border-right: 1px solid var(--panel-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  border-radius: 4px 0 0 4px;
  flex-shrink: 0;
}

.chip-x svg {
  display: block;
}

.chip-scope.on .chip-x {
  border-right-color: var(--panel-line);
}

.chip-x:hover {
  background: rgba(255, 122, 122, 0.12);
  color: var(--uich-danger);
}

.dot-cls {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}

.dot-cls.typo {
  background: hsl(var(--status-loop));
  box-shadow: 0 0 0 2px hsl(var(--status-loop) / 0.2);
}

.dot-cls.atomic {
  background: hsl(var(--status-data));
  box-shadow: 0 0 0 2px hsl(var(--status-data) / 0.2);
}

.dot-cls.global {
  background: rgba(124, 58, 237, 0.95);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

/* ── Global marker (icon, optionally with a text label) ─────────────────
     Subdued look, the marker should hint, not shout. Color tints are
     applied at low alpha; the icon stays uppercase-quiet against the
     surrounding panel chrome. */
.uich-global-marker {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
  gap: 4px;
}

/* Icon color stays uniform across v3 / v4, uses --text-dim so it blends
     into surrounding panel chrome and reads as a hint, not a callout. The
     pill background still carries a subtle version tint (see .has-label
     rules below) for at-a-glance v3 vs v4 distinction. */
.uich-global-marker-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  opacity: 1;
}

.uich-global-marker.is-v3 .uich-global-marker-icon,
.uich-global-marker.is-v4 .uich-global-marker-icon {
  color: var(--text-dim);
}

.uich-composer-host[data-theme="light"] .uich-global-marker.is-v3 .uich-global-marker-icon,
.uich-composer-host[data-theme="light"] .uich-global-marker.is-v4 .uich-global-marker-icon,
.uich-composer-host[data-theme="light"] .uich-global-marker.is-v3 .uich-global-marker-icon,
.uich-composer-host[data-theme="light"] .uich-global-marker.is-v4 .uich-global-marker-icon {
  color: var(--text-dim);
}

/* Labeled marker, used in Applied Class chips. Just icon + uppercase
     mini-label, no chip background or border. */
.uich-global-marker.has-label {
  padding: 0 2px 0 0;
  background: transparent;
  border: 0;
}

.uich-global-marker-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1;
  white-space: nowrap;
}

/* Text + icon both use --text-dim so the labels read as calm metadata.
     No per-version background or border, distinction comes only from
     reading the label itself. */
.uich-global-marker.is-v3.has-label .uich-global-marker-text,
.uich-global-marker.is-v4.has-label .uich-global-marker-text,
.uich-composer-host[data-theme="light"] .uich-global-marker.is-v3.has-label .uich-global-marker-text,
.uich-composer-host[data-theme="light"] .uich-global-marker.is-v4.has-label .uich-global-marker-text,
.uich-composer-host[data-theme="light"] .uich-global-marker.is-v3.has-label .uich-global-marker-text,
.uich-composer-host[data-theme="light"] .uich-global-marker.is-v4.has-label .uich-global-marker-text {
  color: var(--text-dim);
}

.chip-pick .chip-global-marker {
  margin-right: 4px;
}

.chip-pick .chip-name {
  display: inline-flex;
  align-items: center;
}

/* Inline borderless "+ Add class" input that lives in the row */
.add-class-inline {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.add-class-inline input,
.add-class-inline input:focus-visible {
  outline: none;
}

.add-class-inline input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 1px solid transparent !important;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 12px;
  padding: 0 6px;
  height: 24px;
  line-height: 1;
  box-sizing: border-box;
  width: 100%;
  border-radius: 4px;
  transition: border-color .12s, background .12s;
}

.add-class-inline input::-moz-placeholder {
  color: var(--text-dim);
}

.add-class-inline input::placeholder {
  color: var(--text-dim);
}

.add-class-inline input:hover {
  border: 1px dashed var(--panel-line) !important;
}

.add-class-inline input:focus {
  border: 1px solid hsl(var(--primary)) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18);
}

.scope-inline-banner {
  margin-right: auto;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  flex-shrink: 0;
}

.scope-inline-banner b {
  color: var(--uich-text);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

/* Suggest dropdown anchored to the inline add-class input */
.suggest {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 260px;
  white-space: nowrap;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line-2);
  border-radius: 6px;
  padding: 4px;
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.suggest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--uich-text);
  font-size: 12px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}

.suggest-row:hover {
  background: var(--panel-bg-4);
}

.suggest-hint {
  margin-right: auto;
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* TEXT row, label inline with textarea, vertically centered */
.text-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 14px;
}

/* Header line: TEXT label left, dynamic-value icon pushed to the right edge,
   both aligned on the same baseline above the full-width textarea. */
.text-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ── TEXT field: the dynamic trigger lives INSIDE the textarea ─────────────── */
/* The icon used to sit on a header line above the field, beside a "Text" label.
   Both are gone: the label restated the section it sat in (Content, one field,
   placeholder "Inner content of this element…"), and an action floating above a
   field reads as belonging to the section rather than to the input. It is now
   pinned to the textarea's own bottom-right corner.

   Three consequences handled here:
     · the corner is reserved with padding-RIGHT, not padding-bottom. Bottom
       padding in a textarea is trailing space after the last line, so it only
       holds the corner clear while the value is short — the moment the value
       scrolls, lines pass straight under the button. A right gutter takes the
       button's column out of the text measure entirely, at every scroll
       position;
     · the scrollbar shares that gutter, so it is thinned to 3px here (the width
       the panel's own menus already use) rather than sitting 8px wide under the
       icon;
     · `resize-y` is dropped in the JSX, because the native resize grip occupies
       exactly this corner — two controls stacked in the same 16px. The field
       keeps its min-h 60 / max-h 140 range and scrolls beyond that. */
.text-row-area {
  position: relative;
  display: flex;
  width: 100%;
}

/* `.uich-tw` prefix required, not decoration: the textarea carries Tailwind's
   `px-2.5`, emitted as `.uich-tw .px-2\.5` (0,2,0), which outranks a bare
   `.text-row-area > textarea` (0,1,1) — one class plus an element loses to two
   classes. The unprefixed copy covers any host that isn't inside .uich-tw. */
.text-row-area > textarea,
.uich-tw .text-row-area > textarea {
  padding-left: 34px;
}

/* No `scrollbar-width: thin` here. Chrome now implements the standard property
   and, once it is set, ignores the ::-webkit-scrollbar pseudo-elements — and
   `thin` resolves to ~11px, wider than the 3px this panel uses everywhere else.
   The webkit rules alone give the 3px bar (same approach as the menu scrollbars
   further down this file); Firefox keeps its default, which is already narrow. */
.text-row-area > textarea::-webkit-scrollbar {
  width: 3px;
}

.text-row-area > textarea::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.45);
  border-radius: 3px;
}

.text-row-area > textarea::-webkit-scrollbar-track {
  background: transparent;
}

.text-row-area-dyn {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: inline-flex;
  /* The span is only as large as the button, so the textarea keeps every click
     that isn't on the icon itself. */
  z-index: 1;
}

.text-row-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
  width: 38px;
}

.text-row-input {
  flex: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  min-height: 50px;
  max-height: 90px;
  padding: 6px 10px;
  resize: vertical;
}

/* ---- Cascade: applied vs scope-own ---- */
.prop-applied-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* NOTE: the `.uich-tw` prefix is load-bearing, not cosmetic. The dot is a
   <button>, and Tailwind's preflight resets `.uich-tw button { background:
   transparent }`, specificity (0,1,1), which BEATS a bare `.prop-applied-dot`
   (0,1,0). The bare rule below only won on `:hover` ((0,2,0) > (0,1,1)), so the
   dot was transparent by default and only appeared once you hovered. Prefixing
   with `.uich-tw` lifts the base rule to (0,2,0) so the accent fill wins at rest
   too, and the dot is visible without hovering. */
.uich-tw .prop-applied-dot {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  padding: 0;
  margin: 0 2px;
  border: 0;
  border-radius: 50%;
  /* Accent + full opacity so an inherited/applied property is flagged at a
     glance, always visible (no hover needed); hovering the dot then reveals
     the source in a tooltip. */
  background: var(--accent-2);
  opacity: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: opacity .12s, background .12s;
}

.uich-tw .prop-applied-dot:hover {
  opacity: 1;
  background: var(--accent-2);
}

.prop-applied-tip {
  display: flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  max-width: min(420px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line-2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.prop-applied-tip.is-positioned {
  opacity: 1;
  pointer-events: auto;
}

.prop-applied-tip-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.prop-applied-tip-class {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-hi);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.prop-applied-tip-global {
  flex-shrink: 0;
}

.prop-applied-tip-sep {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.65;
  line-height: 1;
}

.prop-applied-tip-value {
  font-size: 11px;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 220px;
}

.prop-global-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.85;
}

.prop-global-badge.compact {
  font-size: 9px;
  gap: 3px;
}

.prop-global-color-wrap {
  position: relative;
  /* anchor for the absolutely-positioned tip */
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
}

.prop-global-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
  transition: transform 120ms ease;
  flex-shrink: 0;
}

.prop-global-color-dot:hover,
.prop-global-color-dot:focus-visible {
  transform: scale(1.25);
  outline: none;
}

/* Pure-CSS hover tooltip, no JS state, no portal. Stays a sibling of
     the dot inside .prop-global-color-wrap so :hover toggles its
     visibility deterministically. */
.prop-global-color-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 50%;
  transform: translateX(50%);
  z-index: 2147483645;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line-2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  white-space: nowrap;
}

.prop-global-color-wrap:hover .prop-global-color-tip,
.prop-global-color-wrap:focus-within .prop-global-color-tip {
  opacity: 1;
  /* Keep `pointer-events: none`, the tooltip is decorative; we don't
       want hovering the tooltip itself to keep it open and we don't want
       clicks on it to swallow events meant for the dot. */
}

.prop-global-color-tip-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-hi);
}

.prop-global-color-tip-badge {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.prop-input-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.field.applied-global .prop-input-stack>.prop-global-badge,
.field.applied-atomic .prop-input-stack>.prop-global-badge {
  align-self: flex-start;
}

.prop-scope-own {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--text-dim);
  opacity: 0.75;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field.inherited .inh {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: hsl(var(--primary));
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}

.inherited-input input,
.linput.inherited-input input,
.panel .inherited-input.input,
.panel .inherited-input.select,
.uich-composer-host .inherited-input.input,
.uich-composer-host .inherited-input.select {
  font-style: italic;
  color: var(--text-mid);
}

.inherited-input input::-moz-placeholder {
  color: var(--text-dim);
  font-style: italic;
  opacity: 0.85;
}

.inherited-input input::placeholder,
.select.inherited-input option[value=""] {
  color: var(--text-dim);
  font-style: italic;
  opacity: 0.85;
}

.prop-applied-tip-bp {
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  color: var(--text-mid);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ====================  GLOBAL TOKENS  ==================== */
/* Unlinked: normal input + globe trigger button on the right */
.global-wrap {
  display: flex;
  align-items: stretch;
  gap: 4px;
  position: relative;
}

.global-input {
  flex: 1;
  min-width: 0;
}

.global-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  color: var(--text-dim);
  width: 30px;
  display: grid;
  place-items: center;
  transition: color .12s, background .12s, border-color .12s;
  flex-shrink: 0;
}

.global-btn:hover {
  color: var(--text-hi);
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
}

.global-btn.on {
  color: var(--text-hi);
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
}

/* Linked: chip replaces input */
.global-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--input-h);
  padding: 0 10px 0 6px;
  border-radius: 5px;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line-2);
  position: relative;
  color: var(--text-hi);
}

.global-locked .global-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hi);
}

.global-locked .global-sub {
  font-size: 10px;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: auto;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
}

.global-edit,
.global-x {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-mid);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.global-edit:hover {
  color: var(--text-hi);
  background: var(--panel-bg-4);
}

.global-x:hover {
  color: var(--uich-danger);
  background: rgba(255, 122, 122, 0.1);
}

/* Global token picker (compact) */
.gpicker {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 220px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 50;
  overflow: hidden;
}

.gpicker-list {
  max-height: 220px;
  overflow: auto;
  padding: 3px;
}

.gpicker-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  color: var(--uich-text);
  text-align: right;
}

.gpicker-row:hover {
  background: var(--panel-bg-3);
}

.gpicker-row.on {
  background: var(--panel-bg-4);
  color: var(--text-hi);
}

.gpicker-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--g, #888);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.gpicker-mark.font,
.gpicker-mark.size {
  border-radius: 3px;
  background: var(--panel-bg-3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.gpicker-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-hi);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gpicker-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* ===== Form inputs, base styles ===== */
.panel .input,
.panel .select,
.panel .textarea,
.uich-composer-host .input,
.uich-composer-host .select,
.uich-composer-host .textarea,
.input,
.select,
.textarea {
  background-color: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  color: var(--uich-text);
  font-family: inherit;
  font-size: 12px;
  height: var(--input-h);
  padding: 0 9px;
  outline: none;
  width: 100%;
  transition: border-color .12s, background-color .12s, color .12s;
}

.panel .input:hover,
.panel .select:hover,
.uich-composer-host .input:hover,
.uich-composer-host .select:hover,
.input:hover,
.select:hover {
  border-color: var(--panel-line-2);
}

.panel .input:focus,
.panel .select:focus,
.panel .textarea:focus,
.uich-composer-host .input:focus,
.uich-composer-host .select:focus,
.uich-composer-host .textarea:focus,
.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--panel-line-2);
  background-color: var(--panel-bg-3);
  color: var(--text-hi);
}

.panel .input::-moz-placeholder, .panel .textarea::-moz-placeholder, .uich-composer-host .input::-moz-placeholder, .uich-composer-host .textarea::-moz-placeholder, .input::-moz-placeholder, .textarea::-moz-placeholder {
  color: var(--text-dim);
  opacity: 1;
}

.panel .input::placeholder,
.panel .textarea::placeholder,
.uich-composer-host .input::placeholder,
.uich-composer-host .textarea::placeholder,
.input::placeholder,
.textarea::placeholder {
  color: var(--text-dim);
  opacity: 1;
}

.panel .input.mono,
.uich-composer-host .input.mono,
.input.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
}

/* text-mono prop fields, select-like box without chevron arrow */
.mono-box {
  position: relative;
  background-color: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  height: var(--input-h);
  width: 100%;
  display: flex;
  align-items: center;
  cursor: text;
  transition: border-color .12s, background-color .12s, color .12s;
}

.mono-box:hover {
  border-color: var(--panel-line-2);
}

.mono-box:focus-within {
  border-color: var(--panel-line-2);
  background-color: var(--panel-bg-3);
}

.mono-box-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  padding: 0 9px;
  width: 100%;
  height: 100%;
}

.mono-box-input::-moz-placeholder {
  color: var(--text-dim);
  opacity: 1;
}

.mono-box-input::placeholder {
  color: var(--text-dim);
  opacity: 1;
}

.mono-box:focus-within .mono-box-input {
  color: var(--text-hi);
}

.mono-box.inherited-input .mono-box-input {
  font-style: italic;
  color: var(--text-mid);
}

.mono-box.inherited-input .mono-box-input::-moz-placeholder {
  color: var(--text-dim);
  font-style: italic;
  opacity: 0.85;
}

.mono-box.inherited-input .mono-box-input::placeholder {
  color: var(--text-dim);
  font-style: italic;
  opacity: 0.85;
}

.custom-css-value-box.inherited-input .custom-css-value-input::-moz-placeholder {
  color: var(--text-mid);
  font-style: italic;
  opacity: 0.9;
}

.custom-css-value-box.inherited-input .custom-css-value-input::placeholder {
  color: var(--text-mid);
  font-style: italic;
  opacity: 0.9;
}

/* ---- Opacity step-button input ---- */
.opacity-input {
  display: flex;
  align-items: stretch;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  height: var(--input-h);
  overflow: hidden;
  transition: border-color .12s, background .12s;
}

.opacity-input:hover {
  border-color: var(--panel-line-2);
}

.opacity-input:focus-within {
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
}

.opacity-input.inherited-input .opacity-input-field {
  font-style: italic;
  color: var(--text-mid);
}

.opacity-input.inherited-input .opacity-input-field::-moz-placeholder {
  color: var(--text-dim);
  font-style: italic;
  opacity: 0.85;
}

.opacity-input.inherited-input .opacity-input-field::placeholder {
  color: var(--text-dim);
  font-style: italic;
  opacity: 0.85;
}

.opacity-step-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  width: 26px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}

.opacity-step-btn:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

.opacity-step-btn:active {
  background: var(--panel-bg-4);
}

.opacity-input-field {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  text-align: center;
  padding: 0;
  height: 100%;
}

.opacity-input-field::-moz-placeholder {
  color: var(--text-dim);
  opacity: 1;
}

.opacity-input-field::placeholder {
  color: var(--text-dim);
  opacity: 1;
}

.opacity-input:focus-within .opacity-input-field {
  color: var(--text-hi);
}

.panel .select,
.uich-composer-host .select,
.select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-color: var(--panel-bg-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%2710%27 viewBox=%270 0 10 10%27><path fill=%27%239a9ca6%27 d=%27M5 7L1 3h8z%27/></svg>");
  background-repeat: no-repeat;
  background-position: left 9px center;
  padding-left: 26px;
  cursor: pointer;
}

.uich-composer-host[data-theme="light"] .panel .select,
.uich-composer-host[data-theme="light"] .uich-composer-host .select,
.uich-composer-host[data-theme="light"] .select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%2710%27 viewBox=%270 0 10 10%27><path fill=%27%236a6c76%27 d=%27M5 7L1 3h8z%27/></svg>");
}

/* Native form controls (select/input/textarea) need an explicit
     color-scheme in light mode. Without this, Chromium can keep painting
     the <select> control with its dark UA chrome even though the CSS
     background-color resolves to the light variable, the visible result
     is a stubbornly dark select sitting in an otherwise-light panel. */
.uich-composer-host[data-theme="light"] .panel .select,
.uich-composer-host[data-theme="light"] .panel .input,
.uich-composer-host[data-theme="light"] .panel .textarea,
.uich-composer-host[data-theme="light"] .uich-composer-host .select,
.uich-composer-host[data-theme="light"] .uich-composer-host .input,
.uich-composer-host[data-theme="light"] .uich-composer-host .textarea,
.uich-composer-host[data-theme="light"] .select,
.uich-composer-host[data-theme="light"] .input,
.uich-composer-host[data-theme="light"] .textarea {
  color-scheme: light;
  background-color: var(--panel-bg-2);
}

.uich-composer-host .select,
.uich-composer-host .input,
.uich-composer-host .textarea {
  color-scheme: dark;
}

.uich-composer-host[data-theme="light"] .panel .inherited-input.select,
.uich-composer-host[data-theme="light"] .panel .inherited-input.input,
.uich-composer-host[data-theme="light"] .inherited-input.select,
.uich-composer-host[data-theme="light"] .inherited-input.input,
.uich-composer-host[data-theme="light"] .panel .inherited-input.select,
.uich-composer-host[data-theme="light"] .panel .inherited-input.input,
.uich-composer-host[data-theme="light"] .uich-composer-host .inherited-input.select,
.uich-composer-host[data-theme="light"] .uich-composer-host .inherited-input.input {
  color-scheme: light;
  background-color: var(--panel-bg-2);
}

/* Override an outer plugin rule (`.uichemy-composer-floating-panel select`)
     that forces a hardcoded dark background / border on every <select>
     with !important. Re-assert the theme variables at equal weight so
     our selects track Light/Dark mode instead of being pinned dark. */
.prop-input-stack select.select,
.uich-composer-host .prop-input-stack select.select,
#uichemy-composer-floating-panel .prop-input-stack select.select {
  background-color: var(--panel-bg-2) !important;
  border: 1px solid var(--panel-line) !important;
  color: var(--uich-text) !important;
}

/* Override outer plugin rules (`.smart-html-floating-panel textarea`)
     that force a hardcoded dark background / border on every <textarea>
     with !important. Re-assert the theme variables so our textareas
     track Light/Dark mode instead of being pinned dark. */
.uich-composer-host .textarea,
.uich-composer-host textarea,
#smart-html-floating-panel .uich-composer-host .textarea,
#smart-html-floating-panel .uich-composer-host textarea,
#uichemy-composer-floating-panel .uich-composer-host .textarea,
#uichemy-composer-floating-panel .uich-composer-host textarea,
.uich-composer-host .element-editor-link-custom,
.uich-composer-host .element-editor-svg-input {
  background-color: var(--panel-bg-2) !important;
  border: 1px solid var(--panel-line) !important;
  color: var(--uich-text) !important;
  color-scheme: inherit !important;
}

.uich-composer-host .textarea::-moz-placeholder, .uich-composer-host textarea::-moz-placeholder {
  color: var(--text-dim) !important;
}

.uich-composer-host .textarea::placeholder,
.uich-composer-host textarea::placeholder {
  color: var(--text-dim) !important;
}

.uich-composer-host textarea:disabled,
.uich-composer-host .textarea:disabled {
  background-color: var(--panel-bg) !important;
}

.panel .select option,
.uich-composer-host .select option,
.select option {
  background-color: var(--panel-bg);
  color: var(--uich-text);
}

/* Prevent WebKit autofill from forcing light-yellow / wrong contrast */
.panel .input:-webkit-autofill,
.panel .select:-webkit-autofill,
.panel .textarea:-webkit-autofill,
.panel .linput input:-webkit-autofill,
.panel .swatch-input input:-webkit-autofill,
.panel .add-class-inline input:-webkit-autofill,
.uich-composer-host .input:-webkit-autofill,
.uich-composer-host .select:-webkit-autofill,
.uich-composer-host .textarea:-webkit-autofill,
.uich-composer-host .linput input:-webkit-autofill {
  -webkit-text-fill-color: var(--uich-text) !important;
  caret-color: var(--uich-text);
  -webkit-transition: background-color 99999s ease-out;
  transition: background-color 99999s ease-out;
  box-shadow: 0 0 0 1000px var(--panel-bg-2) inset !important;
}

.panel .input:-webkit-autofill:focus,
.panel .select:-webkit-autofill:focus,
.uich-composer-host .input:-webkit-autofill:focus,
.uich-composer-host .select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-hi) !important;
  box-shadow: 0 0 0 1000px var(--panel-bg-3) inset !important;
}

.textarea {
  height: auto;
  padding: 8px 10px;
  line-height: 1.45;
  resize: vertical;
}

.input-group {
  display: flex;
  align-items: stretch;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  height: var(--input-h);
  overflow: hidden;
  transition: border-color .12s;
}

.input-group:hover {
  border-color: var(--panel-line-2);
}

.input-group:focus-within {
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
}

.input-group .ico {
  width: 26px;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  border-left: 1px solid var(--panel-line);
  background: var(--panel-bg);
}

.input-group input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 12px;
  padding: 0 9px;
  min-width: 0;
}

.input-group input::-moz-placeholder {
  color: var(--text-dim);
}

.input-group input::placeholder {
  color: var(--text-dim);
}

.input-group .suffix {
  padding: 0 8px;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  border-right: 1px solid var(--panel-line);
  background: var(--panel-bg);
}

.swatch-input {
  display: flex;
  align-items: stretch;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  height: var(--input-h);
  overflow: hidden;
  transition: border-color .12s;
}

/* ColorInput specifically, cap at 200px so it doesn't span the whole
     inspector cell. The plain .swatch-input (used elsewhere, e.g. gradient
     stop pickers) keeps its previous fluid width. */
.swatch-input.color-input {
  max-width: 200px;
  width: 100%;
}

/* Globals / Theme Sync manager, breathing room between the swatch and its hex.
   In that table the colour box sits almost flush against the hex code; the 9px
   the field carries by default reads as cramped at this size. A wider left pad
   sets the code clear of the box. Scoped to the variables table (.var-value-cell
   wraps each value editor), so the inspector's own colour fields keep their
   tighter spacing. */
.var-value-cell .swatch-input input {
  padding-right: 14px;
}

.swatch-input:hover {
  border-color: var(--panel-line-2);
}

.swatch-input:focus-within {
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
}

.swatch-input.is-global-linked {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.06);
}

.swatch-input.is-global-linked:focus-within {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.1);
}

.swatch-input-global-icon {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: grid;
  place-items: center;
  width: 26px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--panel-line);
  background: var(--panel-bg-3);
  color: #ffffff;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.swatch-input-global-icon:hover:not(:disabled) {
  background: var(--panel-bg-4);
  color: #ffffff;
}

.swatch-input-global-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.uich-composer-host[data-theme="light"] .swatch-input-global-icon,
.uich-composer-host[data-theme="light"] .swatch-input-global-icon {
  color: hsl(var(--foreground));
}

.uich-composer-host[data-theme="light"] .swatch-input-global-icon:hover:not(:disabled),
.uich-composer-host[data-theme="light"] .swatch-input-global-icon:hover:not(:disabled) {
  color: hsl(var(--foreground));
}

.swatch-input .sw,
.swatch-input .swatch-trigger {
  width: 30px;
  border: 0;
  border-left: 1px solid var(--panel-line);
  position: relative;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  background:
    linear-gradient(-45deg, var(--panel-bg-4) 25%, transparent 25%, transparent 75%, var(--panel-bg-4) 75%) 0 0 / 8px 8px,
    linear-gradient(-45deg, var(--panel-bg-4) 25%, transparent 25%, transparent 75%, var(--panel-bg-4) 75%) 4px 4px / 8px 8px,
    var(--panel-bg-3);
}

.swatch-input .sw::before,
.swatch-input .swatch-trigger::before,
.swatch-input .swatch-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c, transparent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.swatch-input.disabled {
  opacity: 0.55;
  pointer-events: none;
}

.swatch-input .swatch-trigger:disabled {
  cursor: not-allowed;
}

/* ---- Floating color picker panel ---- */
.cpicker {
  width: 240px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line-2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
}

.cpicker.is-positioned {
  opacity: 1;
  pointer-events: auto;
}

.cpicker.cpicker-inline {
  width: 100%;
  opacity: 1;
  pointer-events: auto;
  box-shadow: none;
  padding: 8px 0 0;
  border: 0;
  background: transparent;
}

/* Simple picker, the surrounding shadcn Popover supplies the surface
   (bg-popover, border, shadow), so the picker body itself is chromeless:
   full width, no card background/border/shadow, just the surface + fields. */
.cpicker.cpicker-simple {
  width: 100%;
  padding: 0;
  gap: 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
}

.cpicker.cpicker-compact {
  padding-top: 6px;
}

.cpicker.cpicker-simple.cpicker-compact {
  padding-top: 0;
}

.cpicker.cpicker-compact .cpicker-sv {
  height: 88px;
}

/* ── Framer-style minimal color picker ─────────────────────────────────────
   Header + fill-type row + SV/hue/alpha + HEX·opacity + format·eyedropper +
   search + styles list + New Style. Uses the composer's theme tokens so it
   works in both dark (default) and light. */
.cpicker.cpicker-advanced {
  width: 268px;
  gap: 10px;
}

/* Header */
.cpk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cpk-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
}

.cpk-close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.cpk-close:hover {
  background: var(--panel-bg-2);
  color: var(--text-hi);
}

/* Fill-type row */
.cpk-types {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cpk-type {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow .12s ease;
}

.cpk-type-dot {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.cpk-type.on {
  box-shadow: inset 0 0 0 2px hsl(var(--primary));
}

.cpk-type.is-disabled {
  cursor: default;
  opacity: .8;
}

/* Value row: HEX + opacity */
.cpk-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cpk-hex-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
}

.cpk-hex-field.is-global-linked {
  border-color: hsl(var(--primary));
}

.cpk-hex {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--text-hi);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.cpk-alpha-field {
  flex: 0 0 74px;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
}

.cpk-alpha {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--text-hi);
  -moz-appearance: textfield;
}

.cpk-alpha::-webkit-outer-spin-button,
.cpk-alpha::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cpk-alpha-suffix {
  font-size: 12px;
  color: var(--text-dim);
}

.cpk-hex-field:focus-within,
.cpk-alpha-field:focus-within {
  border-color: hsl(var(--ring));
}

/* Format dropdown + eyedropper */
.cpk-tools-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cpk-format {
  position: relative;
  flex: 1 1 auto;
}

.cpk-format-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  color: var(--text-hi);
  font-size: 12.5px;
  font-weight: 500;
}

.cpk-format-btn:hover {
  background: var(--panel-bg-3);
}

.cpk-format-menu {
  position: absolute;
  right: 0;
  left: 0;
  top: calc(100% + 4px);
  z-index: 5;
  padding: 4px;
  border-radius: 8px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.cpk-format-opt {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: right;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-mid);
}

.cpk-format-opt:hover {
  background: var(--panel-bg-3);
  color: var(--text-hi);
}

.cpk-format-opt.on {
  color: hsl(var(--primary));
  font-weight: 600;
}

.cpk-eyedropper {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  color: var(--text-mid);
}

.cpk-eyedropper:hover:not(:disabled) {
  background: var(--panel-bg-3);
  color: var(--text-hi);
}

.cpk-eyedropper:disabled {
  opacity: .5;
  cursor: wait;
}

/* Search */
.cpk-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  color: var(--text-dim);
}

.cpk-search:focus-within {
  border-color: hsl(var(--ring));
}

.cpk-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--text-hi);
}

/* Styles list */
.cpk-styles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 168px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.cpk-styles-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 6px 4px;
}

.cpk-style {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 6px;
  border-radius: 7px;
  transition: background-color .12s ease;
}

.cpk-style:hover {
  background: var(--panel-bg-2);
}

.cpk-style.on {
  background: var(--panel-bg-2);
}

.cpk-style-dot {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.cpk-style-name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 13px;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* New Style */
.cpk-newstyle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 36px;
  cursor: pointer;
  border-radius: 8px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  color: var(--text-hi);
  font-size: 13px;
  font-weight: 500;
  transition: background-color .12s ease;
}

.cpk-newstyle:hover:not(:disabled) {
  background: var(--panel-bg-3);
}

.cpk-newstyle:disabled {
  opacity: .55;
  cursor: default;
}

.cpicker-globals-inline {
  border-top: 1px solid var(--panel-line);
  padding-top: 8px;
  margin-top: 2px;
}

.cpicker-visual {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 2px;
}

.cpicker-slider-lane {
  position: relative;
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cpicker-sv-wrap {
  position: relative;
  width: 100%;
}

.cpicker-sv-eyedropper {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.cpicker-sv-eyedropper:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.cpicker-sv-eyedropper:disabled {
  opacity: 0.5;
  cursor: wait;
}

.uich-composer-host[data-theme="light"] .cpicker-sv-eyedropper,
.uich-composer-host[data-theme="light"] .cpicker-sv-eyedropper {
  background: rgba(255, 255, 255, 0.75);
  color: hsl(var(--foreground));
}

.uich-composer-host[data-theme="light"] .cpicker-sv-eyedropper:hover:not(:disabled),
.uich-composer-host[data-theme="light"] .cpicker-sv-eyedropper:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.92);
  color: hsl(var(--foreground));
}

/* ── react-colorful overrides ─────────────────────────────────────────
     The library ships with sensible defaults but a fixed 200×200 footprint
     and chunky sliders. We override the geometry so the picker fills the
     panel width and matches the composer's pill-slider visual language. */
.cpicker-sv-wrap .react-colorful {
  width: 100%;
  height: auto;
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.cpicker-sv-wrap .react-colorful__saturation {
  border-radius: 8px;
  height: 152px;
  /* react-colorful ships a `border-bottom: 12px solid #000` on the
       saturation panel by default (it visually separates the SV plane
       from the hue lane below). We don't want that strip, kill it
       explicitly so all four corners look the same. */
  border: 0;
  box-shadow: inset 0 0 0 1px var(--panel-line);
}

.cpicker.cpicker-compact .react-colorful__saturation {
  height: 88px;
}

.cpicker-sv-wrap .react-colorful__hue,
.cpicker-sv-wrap .react-colorful__alpha {
  height: 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* The checkered backdrop on the alpha lane uses our panel palette so
     the underlay reads consistently with the rest of the picker. */
.cpicker-sv-wrap .react-colorful__alpha {
  background:
    linear-gradient(-45deg, var(--panel-bg-4) 25%, transparent 25%, transparent 75%, var(--panel-bg-4) 75%) 0 0 / 8px 8px,
    linear-gradient(-45deg, var(--panel-bg-4) 25%, transparent 25%, transparent 75%, var(--panel-bg-4) 75%) 4px 4px / 8px 8px,
    var(--panel-bg-2);
}

.cpicker-sv-wrap .react-colorful__last-control {
  border-radius: 999px;
}

/* All three pointers (SV plane, hue, alpha) share one ring-thumb look. */
.cpicker-sv-wrap .react-colorful__pointer {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.cpicker-sv-wrap .react-colorful__pointer-fill {
  box-shadow: none;
}

/* Light theme, soften the pointer's outer ring so it reads on light bg. */
.uich-composer-host[data-theme="light"] .cpicker-sv-wrap .react-colorful__pointer,
.uich-composer-host[data-theme="light"] .cpicker-sv-wrap .react-colorful__pointer {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.uich-composer-host[data-theme="light"] .cpicker-sv-wrap .react-colorful__saturation,
.uich-composer-host[data-theme="light"] .cpicker-sv-wrap .react-colorful__hue,
.uich-composer-host[data-theme="light"] .cpicker-sv-wrap .react-colorful__alpha,
.uich-composer-host[data-theme="light"] .cpicker-sv-wrap .react-colorful__alpha {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.cpicker-sv {
  position: relative;
  height: 152px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--panel-line);
  cursor: crosshair;
  touch-action: none;
  /* Black (value) over white (saturation) over pure hue, order matters */
  background-color: var(--cpicker-hue, #f00);
  background-image:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to left, #fff, transparent);
}

.cpicker-sv-cursor {
  position: absolute;
  width: 18px;
  height: 18px;
  transform: translate(50%, -50%);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  background: #000;
}

/* Shared pill-track + ring-thumb (Elementor-style hue / opacity sliders) */
.cpicker-slider-thumb {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(50%, -50%);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 2;
}

.cpicker-bar-eyedropper {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-mid);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.cpicker-bar-eyedropper:hover:not(:disabled) {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

.cpicker-bar-eyedropper:disabled {
  opacity: 0.5;
  cursor: wait;
}

.cpicker-bar-preview {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  background:
    linear-gradient(-45deg, var(--panel-bg-4) 25%, transparent 25%, transparent 75%, var(--panel-bg-4) 75%) 0 0 / 6px 6px,
    var(--panel-bg-2);
}

.cpicker-slider-lane .cpicker-hue-track,
.cpicker-slider-lane .cpicker-alpha-track {
  width: 100%;
  height: 12px;
  flex-shrink: 0;
  overflow: visible;
}

.cpicker-hue-track {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(to left,
      #ff0000 0%,
      #ffff00 17%,
      #00ff00 33%,
      #00ffff 50%,
      #0000ff 67%,
      #ff00ff 83%,
      #ff0000 100%);
}

.cpicker-hue-thumb {
  background: var(--cpicker-hue, #f00);
}

.cpicker-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cpicker-preview {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid var(--panel-line);
  flex-shrink: 0;
  position: relative;
  background:
    linear-gradient(-45deg, var(--panel-bg-4) 25%, transparent 25%, transparent 75%, var(--panel-bg-4) 75%) 0 0 / 8px 8px,
    var(--panel-bg-2);
}

.cpicker-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--c, transparent);
}

.cpicker-hex {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  height: 26px;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  outline: none;
}

.cpicker-hex:focus {
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
}

.cpicker-eyedropper {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
  color: var(--text-mid);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.cpicker-eyedropper:hover:not(:disabled) {
  color: var(--text-hi);
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
}

.cpicker-eyedropper:disabled {
  opacity: 0.5;
  cursor: wait;
}

.cpicker-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cpicker-kw {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
  color: var(--text-mid);
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}

.cpicker-kw:hover {
  color: var(--uich-text);
  border-color: var(--panel-line-2);
}

.cpicker-kw.on {
  color: var(--text-hi);
  border-color: var(--panel-line-2);
  background: var(--panel-bg-4);
}

.cpicker-globals-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cpicker-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.cpicker-swatch {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--panel-line);
  cursor: pointer;
  position: relative;
  background:
    linear-gradient(-45deg, var(--panel-bg-4) 25%, transparent 25%, transparent 75%, var(--panel-bg-4) 75%) 0 0 / 6px 6px,
    var(--panel-bg-2);
}

.cpicker-swatch::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 3px;
  background: var(--g, transparent);
}

.cpicker-swatch:hover {
  border-color: var(--panel-line-2);
  transform: scale(1.06);
}

.cpicker-swatch.on {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 1px hsl(var(--primary));
}

/* ---- Swatch hover tooltip (name + hex) ---- */
.cpicker-swatch-wrap {
  position: relative;
  display: inline-flex;
}

.cpicker-swatch-tip {
  position: absolute;
  bottom: calc(100% + 7px);
  right: 50%;
  transform: translateX(50%);
  background: var(--panel-bg-4);
  border: 1px solid var(--panel-line-2);
  border-radius: 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.36);
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s, transform .1s;
  transform: translateX(50%) translateY(3px);
  z-index: 10;
}

.cpicker-swatch-wrap:hover .cpicker-swatch-tip {
  opacity: 1;
  transform: translateX(50%) translateY(0);
}

.cpicker-swatch-tip-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-hi);
}

.cpicker-swatch-tip-hex {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* Advanced color picker */
.cpicker.cpicker-advanced {
  width: 248px;
  gap: 10px;
}

/* Format row, tabs + format-specific input fields on a SINGLE line.
     Tabs take their natural width on the left; the fields container flexes
     to fill the rest. Visual separator sits on the row container instead of
     just the tabs, so the divider runs the full width like before. */
.cpicker-format-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-line);
}

.cpicker-format-row .cpicker-format-tabs {
  flex: 0 0 auto;
}

.cpicker-format-row .cpicker-format-fields {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tighter format tabs so they don't dominate the row's width. */
.cpicker-format-row .cpicker-format-tab {
  flex: 0 0 auto;
  min-width: 38px;
  padding: 0 8px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* HEX field is a single input, let it fill its column fully. */
.cpicker-format-row .cpicker-fields-hex {
  width: 100%;
}

/* RGB / HSL grid drops to a new row BELOW the tabs (the 4 inputs need
     the full picker width to be readable). Equal-width columns so R/G/B/A
     line up neatly. */
.cpicker-fields-grid-row {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}

.cpicker-linked-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  font-size: 10px;
  color: var(--text-mid);
}

.cpicker-linked-name {
  font-weight: 600;
  color: var(--uich-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cpicker-linked-var {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-dim);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cpicker-unlink {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  display: grid;
  place-items: center;
}

.cpicker-unlink:hover {
  color: var(--uich-text);
  background: var(--panel-bg-3);
}

.cpicker-alpha-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.cpicker-alpha-track {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

.cpicker-alpha-track::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  background:
    linear-gradient(-45deg, #e8e8e8 25%, #ffffff 25%, #ffffff 75%, #e8e8e8 75%) 0 0 / 10px 10px,
    linear-gradient(-45deg, #e8e8e8 25%, #ffffff 25%, #ffffff 75%, #e8e8e8 75%) 5px 5px / 10px 10px;
}

.cpicker-alpha-track::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to left,
      transparent 0%,
      var(--alpha-solid, #000) 100%);
}

.cpicker-alpha-thumb {
  z-index: 2;
}

.cpicker-alpha-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mid);
  min-width: 32px;
  text-align: left;
  flex-shrink: 0;
}

.cpicker-fields-hex.is-global-linked {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
}

.cpicker-hex-global-icon {
  display: grid;
  place-items: center;
  width: 26px;
  flex-shrink: 0;
  color: #ffffff;
  border-left: 1px solid var(--panel-line);
  background: var(--panel-bg-3);
}

.uich-composer-host[data-theme="light"] .cpicker-hex-global-icon,
.uich-composer-host[data-theme="light"] .cpicker-hex-global-icon {
  color: hsl(var(--foreground));
}

.cpicker-fields-hex.is-global-linked .cpicker-hex {
  border: 0;
  background: transparent;
}

/* Globals group, title (e.g. "Elementor Atomic" / "Elementor Globals")
     sits on its OWN single line; the swatch row drops directly below it.
     `nowrap` on the title prevents the longer labels from spilling onto
     a second line at narrow widths. */
.cpicker-globals-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
}

.cpicker-globals-group:first-of-type {
  margin-top: 4px;
}

.cpicker-globals-group-title {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1;
}

.cpicker-globals-group .cpicker-swatches {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cpicker-format-tabs {
  display: flex;
  gap: 4px;
}

.cpicker-format-tab {
  flex: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
  color: var(--text-dim);
  font-size: 9.5px;
  font-weight: 600;
  padding: 4px 0;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
}

.cpicker-format-tab.on {
  color: var(--text-hi);
  border-color: var(--panel-line-2);
  background: var(--panel-bg-4);
}

.cpicker-fields {
  display: flex;
  gap: 6px;
}

.cpicker-fields-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 52px));
  gap: 3px;
}

.cpicker-num {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9px;
  color: var(--text-dim);
  min-width: 0;
}

.cpicker-num input {
  width: 100%;
  height: 22px;
  padding: 0 3px;
  border-radius: 4px;
  border: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  outline: none;
}

.cpicker-num input:focus {
  border-color: var(--panel-line-2);
}

.cpicker-num-suf {
  font-size: 9px;
  color: var(--text-dim);
}

.cpicker-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.cpicker-action-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
  color: var(--text-mid);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.cpicker-action-btn:hover:not(:disabled) {
  color: var(--uich-text);
  border-color: var(--panel-line-2);
}

.cpicker-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cpicker-globals {
  border-top: 1px solid var(--panel-line);
  padding-top: 8px;
}

.cpicker-globals-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  max-height: 120px;
  overflow-y: auto;
}

.cpicker-global-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border-radius: 4px;
  border: 0;
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
  text-align: right;
}

.cpicker-global-row:hover {
  background: var(--panel-bg-2);
  color: var(--uich-text);
}

.cpicker-global-row.on {
  background: var(--panel-bg-4);
  color: var(--text-hi);
}

.cpicker-global-row-name {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cpicker-mark {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--panel-line);
  flex-shrink: 0;
  position: relative;
  background:
    linear-gradient(-45deg, var(--panel-bg-4) 25%, transparent 25%, transparent 75%, var(--panel-bg-4) 75%) 0 0 / 6px 6px,
    var(--panel-bg-2);
}

.cpicker-mark::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 2px;
  background: var(--g, transparent);
}

/* Inline color field */
.color-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  width: 100%;
}

.color-field.is-global-linked .color-field-row {
  border-color: hsl(var(--primary) / 0.35);
}

.color-field-row {
  margin-bottom: 0;
}

.color-field-row .swatch-preview {
  pointer-events: none;
  cursor: default;
}

.color-field-text,
.swatch-input input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  padding: 0 9px;
  min-width: 0;
  text-transform: uppercase;
}

.swatch-input input.color-field-linked-input {
  color: var(--text-hi);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Global color linked, show name + hex inside the input area */
.swatch-input-global-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8px;
  gap: 1px;
  overflow: hidden;
}

.swatch-input-global-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swatch-input-global-hex {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.field>label {
  font-size: 11px;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.field>label .unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
}

/* segmented (text align, etc.) */
.seg {
  display: inline-flex;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 2px;
  width: 100%;
}

.seg button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-mid);
  flex: 1;
  height: 26px;
  border-radius: calc(var(--radius) - 2px);
  display: grid;
  place-items: center;
  font-family: inherit;
  font-size: 11.5px;
}

.seg button:hover {
  color: var(--uich-text);
}

.seg button.on {
  background: var(--panel-bg-4);
  color: var(--text-hi);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.uich-composer-host[data-theme="light"] .seg button.on,
.uich-composer-host[data-theme="light"] .seg button.on {
  box-shadow: 0 1px 0 rgba(15, 15, 21, 0.08);
}

/* Inherited-from-breakpoint hint, dim, not fully active */
.seg button.inh-on {
  color: var(--text-dim);
  opacity: 0.6;
}

.four-side {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.four-side .input {
  padding: 0 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-align: center;
}

.four-side .label-row {
  display: contents;
  font-size: 10px;
  color: var(--text-dim);
}

.four-side label {
  text-align: center;
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* generic buttons */
.btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:hover {
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
}

.btn.primary {
  background: var(--text-hi);
  border-color: var(--text-hi);
  color: var(--panel-bg);
}

.btn.primary:hover {
  background: var(--uich-text);
  border-color: var(--uich-text);
}

.btn.ghost {
  background: none;
  border-color: transparent;
  color: var(--text-mid);
}

.btn.ghost:hover {
  color: var(--uich-text);
  background: var(--panel-bg-3);
}

.btn.sm {
  padding: 3px 8px;
  font-size: 11px;
}

/* ---- CODE tab (4 scopes, side-by-side editor panes) ---- */
.code2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.code-scope-tabs {
  /* inherits .section-tabs (no bottom padding, no bottom divider) */
}

.code-scope-tabs .stab-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: none;
}

.status-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ok);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

.status-ok .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(227, 237, 93, 0.18);
}

.code2-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  background: var(--panel-bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Collapsible "Assets" accordion (Page / Site scopes). Replaces the old
   top-bar Assets toggle button, the header expands to reveal DependenciesBar. */
.assets-acc {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card, var(--panel-bg));
  overflow: hidden;
  flex: 0 0 auto;
}

.assets-acc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground);
  transition: background-color 0.15s ease;
}

.assets-acc-head:hover {
  background: var(--accent);
}

.assets-acc.open>.assets-acc-head {
  border-bottom: 1px solid var(--border);
}

.assets-acc-label {
  flex: 1;
  text-align: right;
}

.assets-acc-caret {
  display: inline-flex;
  color: var(--muted-foreground);
  transition: transform 0.15s ease;
}

.assets-acc.open .assets-acc-caret {
  transform: rotate(-180deg);
}

.assets-acc-body {
  padding: 10px;
}

.code2-grid {
  flex: 1;
  display: grid;
  gap: 12px;
  min-height: 200px;
}

.code2-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.code2-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.code2-grid.cols-1 {
  grid-template-columns: 1fr;
}

/* Full-width code editor tabs (PaneTabs): one editor at a time, the tab strip
   pinned above it, so HTML/CSS/JS (and Head/Footer) are readable in the narrow
   floating panel instead of squeezed into columns. */
.code2-panes {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.code2-panes .code-pane-tabs {
  flex-shrink: 0;
}
.code2-panes .ed-pane {
  flex: 1;
  min-height: 0;
}

.ed-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  overflow: hidden;
}

.ed-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: linear-gradient(-180deg, var(--panel-bg-2), var(--panel-bg));
  border-bottom: 1px solid var(--panel-line);
  gap: 8px;
}

.ed-pane-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ed-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ed-lang-mark {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid;
  line-height: 1.1;
}

.ed-lang-mark.html {
  color: #ff7f4f;
  background: rgba(255, 127, 79, 0.12);
  border-color: rgba(255, 127, 79, 0.4);
}

.ed-lang-mark.css {
  color: #5ec1ff;
  background: rgba(94, 193, 255, 0.12);
  border-color: rgba(94, 193, 255, 0.4);
}

.ed-lang-mark.js {
  color: var(--warn);
  background: rgba(255, 209, 102, 0.12);
  border-color: rgba(255, 209, 102, 0.4);
}

.ed-lang-mark {
  color: var(--text-mid);
  background: var(--panel-bg-2);
  border-color: var(--panel-line);
}

.ed-pane-tools {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Super-minimal pane header actions (Format / Copy / Assets): bare ghost icons
  , no box/border/background, muted until hover. Scoped so the shared
   .stab-tab used by the section tabs elsewhere is untouched. */
.ed-pane-tools .stab-tab {
  background: transparent;
  border-color: transparent;
  height: 24px;
  min-width: 22px;
  padding: 0 3px;
  color: var(--text-mid);
  opacity: 0.65;
}

.ed-pane-tools .stab-tab:hover {
  background: transparent;
  border-color: transparent;
  color: var(--text-hi);
  opacity: 1;
  padding: 0 3px;
}

.ed-pane-tools .stab-tab.on,
.ed-pane-tools .ed-assets-btn.on {
  background: transparent;
  border-color: transparent;
  color: hsl(var(--primary));
  opacity: 1;
}

.ed-pane-tools .stab-tab:disabled {
  opacity: 0.3;
}

/* Assets button in the CSS / JS code panes, icon + always-visible count,
   kept minimal: a small accent-coloured number, no filled pill. */
.ed-assets-btn .ed-assets-n {
  margin-right: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: hsl(var(--primary));
  font-variant-numeric: tabular-nums;
}

/* CSS / JS tabs inside the assets panel. */
.deps-kind-tabs {
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}

.ed-pane-body {
  flex: 1;
  overflow: auto;
  padding: 8px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--uich-text);
  background: var(--panel-bg);
}

.ed-pane-body .ln {
  display: grid;
  grid-template-columns: 40px 1fr;
}

.ed-pane-body .ln .n {
  color: #4a4c55;
  text-align: left;
  padding-left: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ed-pane-body .ln .c {
  white-space: pre;
  padding-left: 12px;
}

.ed-pane-body .ln.active {
  background: rgba(var(--accent-rgb), 0.07);
}

.ed-pane-body .ln.active .n {
  color: hsl(var(--primary));
}

.code-side {
  border-left: 1px solid var(--panel-line);
  padding: 12px;
  background: var(--panel-bg-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.code-side .stab {
  height: 28px;
  border-radius: 5px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-mid);
  cursor: pointer;
  font-size: 12px;
}

.code-side .stab:hover {
  background: var(--panel-bg-3);
  color: var(--uich-text);
}

.code-side .stab.on {
  background: var(--accent-bg);
  color: var(--text-hi);
}

.code-side .stab .ext {
  margin-right: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
}

.editor-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.editor-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--panel-line);
  background: linear-gradient(-180deg, var(--panel-bg-2), var(--panel-bg));
  color: var(--text-mid);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

.editor-tools .spacer {
  flex: 1;
}

.editor-tools .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ok);
}

.editor-tools .status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(227, 237, 93, 0.18);
}

.editor {
  flex: 1;
  overflow: auto;
  padding: 12px 0 12px 0;
  background: var(--panel-bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--uich-text);
}

.editor .ln {
  display: grid;
  grid-template-columns: 48px 1fr;
}

.editor .ln .n {
  color: #4a4c55;
  text-align: left;
  padding-left: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.editor .ln .c {
  white-space: pre;
}

.editor .ln.active {
  background: rgba(var(--accent-rgb), 0.07);
}

.editor .ln.active .n {
  color: hsl(var(--primary));
}

.tk-tag {
  color: #ff9ec6;
}

.tk-attr {
  color: var(--warn);
}

.tk-str {
  color: #9bdc9e;
}

.tk-cls {
  color: #9ccfff;
}

.tk-punc {
  color: #6a6c76;
}

.tk-txt {
  color: var(--uich-text);
}

/* ---- CHAT tab ---- */
.chat-wrap {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
}

.chat-side {
  border-left: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-side .new {
  margin-bottom: 6px;
}

.chat-side .ctile {
  height: auto;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-mid);
}

.chat-side .ctile:hover {
  background: var(--panel-bg-3);
  color: var(--uich-text);
}

.chat-side .ctile.on {
  background: var(--panel-bg-3);
  color: var(--text-hi);
}

.chat-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-msgs {
  flex: 1;
  overflow: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.msg {
  display: flex;
  gap: 12px;
  max-width: 720px;
}

.msg .av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--panel-bg-3);
  display: grid;
  place-items: center;
  color: var(--text-mid);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.msg.ai .av {
  background: linear-gradient(-135deg, hsl(var(--primary)), hsl(var(--primary)));
  color: white;
}

.msg .body {
  flex: 1;
  min-width: 0;
}

.msg .who {
  font-size: 11px;
  color: var(--text-mid);
  margin-bottom: 4px;
}

.msg .who b {
  color: var(--text-hi);
  font-weight: 600;
  margin-left: 6px;
}

.msg .bubble {
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--uich-text);
  font-size: 12.5px;
  line-height: 1.5;
}

.msg.user .bubble {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.25);
}

.msg .bubble .ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: hsl(var(--primary));
}

.msg .actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.composer {
  border-top: 1px solid var(--panel-line);
  padding: 10px 14px;
  background: var(--panel-bg-2);
}

.composer .ctx {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--text-mid);
}

.composer .ctx .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--panel-bg-3);
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.composer .ctx .chip .x {
  color: var(--text-dim);
  cursor: pointer;
}

.composer .box {
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.composer .box:focus-within {
  border-color: var(--panel-line-2);
}

.composer textarea {
  background: none;
  border: 0;
  outline: none;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 13px;
  resize: none;
  width: 100%;
  height: 42px;
}

.composer textarea::-moz-placeholder {
  color: var(--text-dim);
}

.composer textarea::placeholder {
  color: var(--text-dim);
}

.composer .tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.composer .tools .spacer {
  flex: 1;
}

.composer .modelpick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-mid);
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  cursor: pointer;
  background: var(--panel-bg);
}

/* ---- empty/locked state for content tab ---- */
.empty {
  margin: auto;
  text-align: center;
  color: var(--text-mid);
  padding: 40px;
}

.empty h3 {
  color: var(--text-hi);
  margin: 8px 0 6px;
  font-size: 14px;
}

.empty p {
  margin: 0;
  font-size: 12px;
  max-width: 320px;
  line-height: 1.5;
}

/* tiny utility */
.row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================ */
/*           NEW: schema-driven fields & UX components          */
/* ============================================================ */

/* ---- Compact unit pill inside length inputs ---- */
.linput {
  display: flex;
  align-items: stretch;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  height: var(--input-h);
  overflow: visible;
  position: relative;
  transition: border-color .12s, box-shadow .12s;
}

.linput:hover {
  border-color: var(--panel-line-2);
}

.linput:focus-within {
  border-color: var(--panel-line-2);
  box-shadow: none;
}

.linput input,
.linput input:hover,
.linput input:focus,
.linput input:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.linput input {
  flex: 1 1 48px;
  min-width: 0;
  max-width: 80px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: none;
  border: none !important;
  outline: none;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  padding: 0 6px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.linput input::-moz-placeholder {
  color: var(--text-dim);
}

.linput input::placeholder {
  color: var(--text-dim);
}

.panel .linput input,
.uich-composer-host .linput input {
  color: var(--uich-text);
  background-color: transparent !important;
}

.panel .inherited-input.input,
.panel .inherited-input.select,
.panel .select.inherited-input,
.uich-composer-host .inherited-input.input,
.uich-composer-host .inherited-input.select {
  color: var(--text-mid);
  background-color: var(--panel-bg-2);
}

.panel .inherited-input.input:focus,
.panel .inherited-input.select:focus,
.uich-composer-host .inherited-input.input:focus,
.uich-composer-host .inherited-input.select:focus {
  color: var(--text-hi);
  background-color: var(--panel-bg-3);
}

.linput.kw {
  padding-right: 6px;
}

.linput-kw {
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  color: var(--text-mid);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-style: italic;
}

.upill {
  position: relative;
  display: inline-flex;
  align-self: center;
  margin-left: 2px;
}

.upill-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border: 0;
  background: var(--panel-bg-3);
  color: var(--text-mid);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: lowercase;
  padding: 0 6px;
  height: 18px;
  min-width: 30px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  text-align: center;
}

.upill-label {
  display: block;
  max-width: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upill-btn:hover {
  color: var(--text-hi);
  background: var(--panel-bg-4);
}

.upill-list {
  min-width: 76px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 3px;
  overflow-y: auto;
}

.upill-list-portal {
  z-index: 2147483646;
}

.upill-btn.on {
  color: hsl(var(--primary));
  background: var(--panel-bg-4);
}

/* Dark theme only: active unit pill uses the pink accent (#f0abfc). */
body[data-uich-composer-theme="dark"] .upill-btn.on,
body[data-theme="dark"] .upill-btn.on,
.uich-composer-host[data-theme="dark"] .upill-btn.on,
.panel[data-theme="dark"] .upill-btn.on {
  color: #f0abfc;
}

.upill-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  color: var(--uich-text);
  text-align: right;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.upill-row:hover {
  background: var(--panel-bg-4);
}

.upill-row.on {
  background: rgba(var(--accent-rgb), 0.16);
  color: hsl(var(--primary));
  font-weight: 600;
}

/* Dark theme only: dropdown active item uses the pink accent (#f0abfc). */
body[data-uich-composer-theme="dark"] .upill-row.on,
body[data-theme="dark"] .upill-row.on,
.uich-composer-host[data-theme="dark"] .upill-row.on {
  background: rgba(240, 171, 252, 0.16);
  color: #f0abfc;
}

/* ---- PropField, robust 52px-tall field with corner × on hover ---- */
.field.pf {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  min-width: 0;
}

.field.pf .pf-label {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-mid);
  min-height: 14px;
  gap: 6px;
  line-height: 1.25;
}

.field.pf .pf-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

.field.pf .pf-name-text {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

.field.pf .pf-name>.uich-global-marker {
  align-self: center;
}

/* Text shadow, offsets + color picker */
.shadow-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
  width: 100%;
  min-width: 0;
}

.shadow-field-dim {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.shadow-field-dim>span {
  font-size: 9.5px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shadow-field-color {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.shadow-field-color-label {
  font-size: 9.5px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shadow-field-color .swatch-input {
  width: 100%;
  max-width: none;
}

.field.pf .pf-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.field.pf .pf-remove {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  height: 22px;
  padding: 0 7px;
  line-height: 0;
  border-radius: 5px;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 1;
  transition: color .12s, background .12s, border-color .12s;
  flex-shrink: 0;
}

.field.pf .pf-remove svg {
  display: block;
}

.field.pf .pf-remove:hover {
  color: var(--uich-danger, #e05555);
  background: rgba(255, 122, 122, 0.12);
  border-color: rgba(255, 122, 122, 0.35);
}

/* ── Visual position inset editor (top/right/bottom/left offsets) ──────────── */
.inset-ctl {
  width: 100%;
}

.inset-box {
  position: relative;
  width: 100%;
  min-height: 132px;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  background: var(--panel-bg-2);
  display: grid;
  place-items: center;
}

.inset-side {
  position: absolute;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-mid);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 6px;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .12s, color .12s;
}

.inset-side:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

.inset-side.active {
  color: var(--text-hi);
  background: var(--panel-bg-4);
  box-shadow: inset 0 0 0 1px var(--panel-line-2);
}

.inset-side.is-empty {
  color: var(--text-dim);
}

.inset-top {
  top: 8px;
  right: 50%;
  transform: translateX(50%);
}

.inset-bottom {
  bottom: 8px;
  right: 50%;
  transform: translateX(50%);
}

.inset-left {
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.inset-right {
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.inset-center {
  width: 104px;
}

.attribute-remove-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 4px !important;
  background: var(--panel-bg-3) !important;
  border: 1px solid var(--panel-line-2) !important;
  color: var(--text-dim) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.attribute-remove-btn:hover {
  background: var(--panel-bg-4) !important;
  border-color: var(--panel-line-3) !important;
  color: var(--uich-danger) !important;
}

.custom-css-field .pf-label {
  justify-content: flex-start;
  align-items: center;
}

.custom-css-field .pf-meta {
  gap: 8px;
  flex-shrink: 0;
}

.custom-css-field .pf-name {
  flex-wrap: nowrap;
  max-width: 100%;
}

.custom-css-field .pf-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.custom-css-field .gp-gradient-remove-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s, color .12s;
}

.custom-css-field .pf-label:hover .gp-gradient-remove-btn {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Preset chips (Auto / 100% / Fit / etc.) ---- */
.preset-chips {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.preset-chip {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 11px;
  padding: 3px 8px;
  height: 22px;
}

.preset-chip:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
}

.preset-chip.on {
  background: var(--panel-bg-3);
  color: var(--text-hi);
  border-color: var(--panel-line-2);
}

/* ---- Editable combobox (Font Family etc.) ---- */
.combo {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  overflow: visible;
  min-height: var(--input-h);
}

.combo .combo-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent !important;
  border: 0;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 12px;
  padding: 4px 8px 4px 6px;
  outline: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.combo .combo-input::-moz-placeholder {
  color: var(--text-dim);
}

.combo .combo-input::placeholder {
  color: var(--text-dim);
}

.combo .combo-chevron {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0 8px;
  color: var(--text-mid);
  display: inline-flex;
  align-items: center;
}

.combo .combo-chevron:hover {
  color: var(--text-hi);
}

.combo.open {
  border-color: var(--panel-line-2);
}

.combo.inherited-input .combo-input {
  font-style: italic;
  color: var(--text-mid);
}

.combo .combo-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 2147483645;
  max-height: 240px;
  overflow-y: auto;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  padding: 4px;
}

.combo .combo-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 12px;
  text-align: right;
  padding: 6px 8px;
  border-radius: 4px;
  width: 100%;
  display: block;
}

.combo .combo-row:hover {
  background: var(--panel-bg-3);
}

.combo .combo-row.on {
  background: var(--panel-bg-3);
  color: var(--text-hi);
}

/* ---- Section empty state ---- */
.section-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-mid);
  font-size: 12px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section-empty b {
  color: var(--text-hi);
}

.section-empty-hint {
  color: var(--text-dim);
  font-size: 11px;
}

/* ---- Subsection separator ---- */
.subsection {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 -2px;
  padding-top: 8px;
  border-top: 1px dashed var(--panel-line);
}

.subsection-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subsection-hint {
  font-size: 10.5px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

/* ---- Add Property, distinct card, not a field ---- */
.add-prop-inline {
  /* parent .section is flex column; add-prop is its own block, full width */
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--panel-line);
}

.add-prop-inline:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.add-prop-inline-trigger {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  width: 100%;
  background: var(--panel-bg-2);
  border: 1px dashed var(--panel-line-2);
  border-radius: 6px;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .12s, background .12s, border-color .12s;
}

.add-prop-inline-trigger:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
  border-style: solid;
}

.api-count {
  margin-right: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-dim);
}

.api-inh-pill {
  font-size: 10px;
  color: var(--text-mid);
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line-2);
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.api-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line-2);
  padding: 0 5px;
  border-radius: 3px;
  line-height: 14px;
  height: 14px;
}

.add-prop-inline.open {
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 8px;
  padding: 8px 10px;
}

.custom-css-section .add-prop-inline:not(.open) {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.custom-css-divider {
  border-top: 1px dashed var(--panel-line);
  margin-top: 4px;
}

.custom-css-section .api-row:not(.has-preview) {
  border-bottom: none;
  padding-bottom: 0;
}

.api-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--panel-line);
  color: var(--text-mid);
}

.api-row input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 13px;
}

.api-row input::-moz-placeholder {
  color: var(--text-dim);
}

.api-row input::placeholder {
  color: var(--text-dim);
}

.api-input-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  padding: 4px 8px;
}

.api-input-box input {
  width: 100%;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 13px;
}

.api-input-box input::-moz-placeholder {
  color: var(--text-dim);
}

.api-input-box input::placeholder {
  color: var(--text-dim);
}

.api-hint {
  font-size: 10.5px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

.api-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.api-preview {
  display: inline-block;
  padding: 6px 10px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--uich-text);
  word-break: break-all;
}

.api-close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-dim);
  display: grid;
  place-items: center;
}

.api-close:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

.api-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.api-row-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.api-row-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 4px;
  flex-shrink: 0;
}

.api-chip {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line);
  color: var(--uich-text);
  font-family: inherit;
  font-size: 11.5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.api-chip:hover {
  background: var(--panel-bg-4);
  color: var(--text-hi);
  border-color: var(--panel-line-2);
}

.api-chip.inh {
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
  color: var(--text-hi);
}

.api-chip.inh:hover {
  background: var(--panel-bg-4);
}

.api-chip-from {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--text-mid);
  background: var(--panel-bg-4);
  padding: 1px 5px;
  border-radius: 3px;
}

.api-empty {
  color: var(--text-dim);
  font-size: 11.5px;
  padding: 14px;
  text-align: center;
  width: 100%;
}

/* ============================================================ */
/*           Spacing widget (Webflow/Framer-style)              */
/* ============================================================ */
.sb {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 16px;
  padding: 0 2px;
}

.sb-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sb-label-inner {
  color: var(--text-mid);
}

.sb-tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sb-link {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border: 0;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  color: var(--text-dim);
  background: transparent;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sb-link:hover {
  color: var(--uich-text);
  background: var(--panel-bg-3);
}

.sb-link.on {
  color: var(--text-hi);
  background: var(--panel-bg-4);
}

.sb-mar,
.sb-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  padding: 5px 8px;
  gap: 3px;
}

.sb-pad {
  background: var(--panel-bg-3);
  padding: 5px;
}

.sb-mar-mid,
.sb-pad-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.sb-pad-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sb-pad-row {
  padding: 0 2px;
}

.sb-cell {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  width: 40px;
  height: 18px;
  text-align: center;
  outline: none;
  border-radius: 4px;
  padding: 0 3px;
}

.sb-cell::-moz-placeholder {
  color: var(--text-dim);
}

.sb-cell::placeholder {
  color: var(--text-dim);
}

.sb-cell:hover {
  background: var(--panel-bg-3);
}

.sb-mar>.sb-cell:hover {
  background: var(--panel-bg-3);
}

.sb-pad>.sb-cell:hover {
  background: var(--panel-bg-4);
}

.sb-cell:focus {
  background: var(--panel-bg-4);
  box-shadow: 0 0 0 1px var(--panel-line-2) inset;
  color: var(--text-hi);
}

.sb-content {
  flex: 1;
  min-height: 24px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-hi);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}

.sb-content .sb-x {
  color: var(--text-dim);
}

/* Compact single-ring variant used by the position Inset control, one box,
   shorter centre, slightly tighter cells than the nested margin/padding box. */
.sb-inset {
  gap: 6px;
}

.sb-inset .sb-pad {
  padding: 8px 10px;
}

.sb-inset .sb-content {
  min-height: 26px;
  font-size: 10.5px;
}

.sb-inset .sb-cell {
  width: 52px;
  height: 20px;
  font-size: 11.5px;
}

/* ============================================================ */
/*           Dependencies bar (Code tab)                         */
/* ============================================================ */
.deps-bar {
  margin-bottom: 2px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  overflow: visible;
}

.deps-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--panel-line);
  background: linear-gradient(-180deg, var(--panel-bg-2), var(--panel-bg));
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
}

.deps-bar.collapsed .deps-head {
  border-bottom: 0;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
}

.deps-collapse {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  width: 18px;
  height: 18px;
  color: var(--text-mid);
  display: grid;
  place-items: center;
  border-radius: 3px;
}

.deps-collapse:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

.deps-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-hi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deps-scope {
  font-size: 10px;
  font-weight: 700;
  color: hsl(var(--primary));
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.deps-count {
  font-size: 11px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

.deps-spacer {
  flex: 1;
}

.deps-hint {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

.deps-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 14px;
  color: var(--text-mid);
  font-size: 12px;
  background: var(--panel-bg);
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
}

.dep {
  display: grid;
  /* toggle | name | settings (pencil) | remove. Everything else — kind, version, URL,
     load order, injection point — moved into the settings modal, because in the
     narrow dock the nine-column row truncated every field including the name. */
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--panel-line);
  color: var(--uich-text);
  font-size: 12px;
}

.dep:hover {
  background: rgba(255, 255, 255, 0.015);
}

/* A disabled row reads as disabled through its dimmed name; the switch is
   exempt because it is the one control that has to stay clickable AND legible
   from that state — .45 on top of an already-low-contrast OFF switch was most
   of why it looked like an empty pill in dark mode. */
.dep.disabled {
  opacity: .6;
}

.dep.disabled [role='switch'] {
  opacity: 1;
}

/* Pending dep row, same grid, accent left border, Add button instead of edit */
.dep.dep-pending {
  /* toggle | kind | name | ver | url | location-dd | Add btn | × | (spare) */
  grid-template-columns: 22px 32px 1fr 80px 2fr auto auto auto auto;
  border-right: 2px solid hsl(var(--primary));
  background: rgba(var(--accent-rgb), 0.04);
}

.dep.dep-pending:hover {
  background: rgba(var(--accent-rgb), 0.07);
}

.dep-toggle-preview {
  /* Non-interactive toggle placeholder */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 14px;
  background: var(--panel-bg-3);
  border-radius: 999px;
  position: relative;
  opacity: 0.4;
}

.dep-ver-static {
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 4px;
}

.dep-pending-add {
  white-space: nowrap;
}

.dep-kind {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  text-align: center;
}

.dep-kind.script {
  background: rgba(255, 209, 102, 0.14);
  color: var(--warn);
  border: 1px solid rgba(255, 209, 102, 0.3);
}

.dep-kind.style {
  background: rgba(126, 200, 255, 0.14);
  color: #7ec8ff;
  border: 1px solid rgba(126, 200, 255, 0.3);
}

.dep-kind.font {
  background: rgba(196, 150, 255, 0.16);
  color: hsl(var(--primary) / 0.35);
  border: 1px solid rgba(196, 150, 255, 0.32);
}

/* Read-only metadata chip used on the dep DISPLAY row (attrs summary,
     location summary). Visually matches the interactive button shape so
     the layout doesn't jump between display ↔ edit, but the cursor and
     hover states make it clear it isn't clickable, editing happens
     through the Edit (pencil) button. */
.dep-meta-static {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  color: var(--text-mid);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  height: 24px;
  padding: 0 10px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dep-name {
  font-weight: 600;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dep-ver {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.dep-ver-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  outline: none;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  width: 64px;
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid transparent;
}

.dep-ver-input:hover {
  border-color: var(--panel-line);
}

.dep-ver-input:focus {
  border-color: hsl(var(--primary));
  background: var(--panel-bg-2);
}

.dep-url {
  color: var(--text-mid);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.dep-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  color: var(--text-mid);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  height: 24px;
  padding: 0 8px 0 22px;
  flex-shrink: 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%279%27 height=%276%27 viewBox=%270 0 9 6%27%3E%3Cpath d=%27M1 1l3.5 3.5L8 1%27 stroke=%27%236a6c76%27 stroke-width=%271.5%27 fill=%27none%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 6px center;
  outline: none;
  transition: border-color 0.15s, color 0.15s;
}

.dep-select:hover {
  border-color: var(--panel-line-2);
  color: var(--uich-text);
}

.dep-select:focus {
  border-color: hsl(var(--primary));
  color: var(--text-hi);
}

.dep-attrs {
  display: inline-flex;
  gap: 4px;
}

.dep-attr {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: lowercase;
}

.dep-attr:hover {
  color: var(--uich-text);
  background: var(--panel-bg-3);
}

.dep-attr.on {
  background: var(--panel-bg-4);
  color: var(--text-hi);
  border-color: var(--panel-line-2);
}

.dep-x {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-dim);
  display: grid;
  place-items: center;
}

.dep-x:hover {
  color: var(--uich-danger);
  background: rgba(255, 122, 122, 0.1);
}

.dep-edit {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-dim);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
}

.dep:hover .dep-edit {
  opacity: 1;
}

.dep-edit:hover {
  color: var(--text-hi);
  background: var(--panel-bg-4);
}

/* Inline-edit row layout –
       toggle | kind | name | ver | url | attrs-dd | loc-dd | actions.
     The attrs dropdown is always shown (defer/async/module/media); the
     location dropdown is only shown for page/site scopes. When the
     location is absent (standard scope edit) the trailing `auto` column
     collapses to zero width so Save still stays on the same line. */
.dep.dep-editing {
  display: grid;
  grid-template-columns: 22px 56px 1fr 90px 2fr auto auto auto;
  align-items: center;
  gap: 8px;
  background: rgba(var(--accent-rgb), 0.06);
}

.dep-edit-kind,
.dep-edit-input {
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  padding: 4px 8px;
  height: 26px;
  outline: none;
  min-width: 0;
}

.dep-edit-kind:focus,
.dep-edit-input:focus {
  border-color: var(--panel-line-2);
}

.dep-edit-actions {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Dependency settings dropdown ──────────────────────────────────────────
   Opened by the row's pencil and anchored to it by computePickerPosition, so it
   reads as "settings for THIS row" instead of a centred dialog that dims the
   very list you are working through. Fixed + portalled for the same reason
   .dep-add-float is: inside the narrow dock an absolutely positioned panel gets
   squeezed down to the column's width. */
.dep-settings-float {
  position: fixed;
  z-index: 2147483200;
  box-sizing: border-box;
  width: 288px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 460px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: var(--radius, 6px);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  color: var(--uich-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.dep-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px 8px 8px;
  border-bottom: 1px solid var(--panel-line);
}

.dep-settings-head strong {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dep-settings-x {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
}

.dep-settings-x:hover {
  background: var(--panel-bg-3);
  color: var(--text-hi);
}

/* One field per row. Two columns fit the width but leave every label clipped;
   the panel scrolls instead. */
.dep-settings-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
}

.dep-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dep-field-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--panel-line);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.dep-field-check:hover {
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
}

/* Drawn from scratch rather than left native. The panel inherits Tailwind's
   preflight (`border-width: 0` on every element) and sits inside WP admin,
   whose own input styles also land here — between the two, a native checkbox
   rendered as an unlabelled, borderless blank that read as empty space whether
   it was ticked or not. `accent-color` can't fix that: it only tints a control
   that is still drawing itself. appearance:none + our own box and tick makes
   the state legible in both skins. */
.dep-field-check input[type='checkbox'] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  margin: 1px 0 0;
  width: 15px;
  height: 15px;
  border: 1px solid var(--panel-line-2);
  border-radius: 4px;
  background: var(--panel-bg);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.dep-field-check input[type='checkbox']:hover {
  border-color: hsl(var(--primary));
}

.dep-field-check input[type='checkbox']:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 1px;
}

.dep-field-check input[type='checkbox']:checked {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

/* The tick itself — a rotated L, so it needs no icon font or background image. */
.dep-field-check input[type='checkbox']::after {
  content: '';
  position: absolute;
  right: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid hsl(var(--primary-foreground));
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0.6);
  opacity: 0;
  transition: opacity 0.12s, transform 0.12s;
}

.dep-field-check input[type='checkbox']:checked::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.dep-field-check-name {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-hi);
}

.dep-field-check-hint {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
}

.dep-settings-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-top: 1px solid var(--panel-line);
}

/* The open row stays lit while its dropdown is up, so it is obvious which
   library the floating panel belongs to. */
.dep.dep-open {
  background: rgba(var(--accent-rgb), 0.06);
}

.deps-foot {
  padding: 8px 12px;
  border-top: 1px solid var(--panel-line);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-bg);
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
}

/* Attributes dropdown (replaces pill chips) */
.dep-attrs-dd {
  position: relative;
}

.dep-attrs-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 180px;
}

.dep-attrs-btn>span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dep-attrs-btn:hover,
.dep-attrs-dd.open .dep-attrs-btn {
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
}

.dep-attrs-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  min-width: 240px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  z-index: 200;
  padding: 4px;
}

.dep-attrs-section {
  padding: 8px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dep-attrs-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--uich-text);
  text-align: right;
  font-size: 12px;
  white-space: nowrap;
}

.dep-attrs-row .dep-attrs-name,
.dep-attrs-row .dep-attrs-hint {
  white-space: nowrap;
}

.dep-attrs-row:hover {
  background: var(--panel-bg-3);
}

.dep-attrs-row.on .dep-attrs-name {
  color: var(--text-hi);
  font-weight: 600;
}

.dep-attrs-row .radio {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--text-dim);
  flex-shrink: 0;
  position: relative;
}

.dep-attrs-row.on .radio {
  border-color: var(--text-hi);
}

.dep-attrs-row.on .radio::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--text-hi);
  border-radius: 50%;
}

.dep-attrs-row .check {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1.5px solid var(--text-dim);
  flex-shrink: 0;
  position: relative;
}

.dep-attrs-row.on .check {
  border-color: var(--text-hi);
  background: var(--text-hi);
}

.dep-attrs-row.on .check::after {
  content: '';
  position: absolute;
  right: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid var(--panel-bg);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.dep-attrs-name {
  flex: 1;
}

.dep-attrs-hint {
  font-size: 10.5px;
  color: var(--text-dim);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.dep-add {
  position: relative;
  /* Span the footer width so the anchored popover's `max-width: 100%` is
     measured against the panel, not the button, keeps it from overflowing
     (and being clipped) in the narrow right dock. */
  flex: 1 1 auto;
  min-width: 0;
}

.dep-add-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg-2);
  border: 1px dashed var(--panel-line-2);
  border-radius: 4px;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  /* compact, was 5px 10px */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
}

.dep-add-btn:hover,
.dep-add.open .dep-add-btn {
  color: var(--text-hi);
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
  border-style: solid;
}

.dep-add-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 360px;
  /* trimmed from 380px */
  /* Never exceed the panel: in the narrow right dock this shrinks the popover
     to the footer width so it stops overflowing/clipping; on wide docks it
     stays 360px. */
  max-width: 100%;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  z-index: 30;
  display: flex;
  flex-direction: column;
  max-height: 380px;
  /* shorter, was 460px */
  overflow: hidden;
}

.dep-add-tabs {
  display: flex;
  gap: 2px;
  padding: 6px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--panel-line);
}

.dep-add-tabs button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dep-add-tabs button:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

.dep-add-tabs button.on {
  color: var(--text-hi);
  background: var(--panel-bg-3);
  box-shadow: 0 0 0 1px var(--panel-line-2);
}

/* Library catalog search + list inside the popover */
.lib-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--panel-line);
  color: var(--text-dim);
  background: var(--panel-bg);
}

.lib-search input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 13px;
}

.lib-search input::-moz-placeholder {
  color: var(--text-dim);
}

.lib-search input::placeholder {
  color: var(--text-dim);
}

.lib-search-clear {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border: 0;
  background: none;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  color: var(--text-dim);
  display: grid;
  place-items: center;
}

.lib-search-clear:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

.lib-list {
  overflow-y: auto;
  flex: 1;
  padding: 6px;
  min-height: 0;
}

/* ── Catalog row: add (whole row) + docs link (its own control) ─────────────
   The row carries MENU_ITEM_CLS for hover/spacing; the inner add button is
   transparent and inherits it so the hit target is the full row without
   nesting a <button> inside a <button>. */
.lib-row {
  padding-left: 2px;
}
.lib-row-add {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: pointer;
}
.lib-row-add:disabled {
  cursor: default;
}
/* An already-added entry stays readable but stops advertising itself as an
   action — the tick is the affordance, not the dimming alone. */
.lib-row.is-added {
  opacity: 0.55;
}
.lib-row-added {
  flex: 0 0 auto;
  color: var(--status-ok, #3fb950);
}
.lib-row-site {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.lib-row-site:hover {
  background: var(--panel-bg-3);
  color: var(--text-hi);
}

.lib-group {
  padding: 8px 8px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lib-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
}

.lib-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 5px;
  color: var(--uich-text);
  text-align: right;
}

.lib-row:hover:not(:disabled) {
  background: var(--panel-bg-3);
}

.lib-row:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.lib-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lib-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.25;
}

.lib-ver {
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 10.5px;
}

.lib-brief {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lib-added {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ok);
  background: rgba(227, 237, 93, 0.14);
  border: 1px solid rgba(227, 237, 93, 0.3);
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Selected state for catalog rows */
.lib-row.selected {
  background: var(--panel-bg-3);
}

.lib-row.selected .lib-name {
  color: var(--text-hi);
}

.lib-selected-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: hsl(var(--primary));
  flex-shrink: 0;
}

/* Confirm bar, appears at the bottom of the catalog list when a row is selected */
.lib-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--panel-line);
  background: var(--panel-bg);
  flex-shrink: 0;
}

.lib-confirm-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.lib-confirm-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lib-confirm-ver {
  font-size: 10.5px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

/* Location dropdown menu, by default anchored to the RIGHT of the trigger
     (inherits from `.dep-attrs-menu`) so the menu grows LEFTWARD into the
     deps bar instead of overflowing rightward past the container edge. */
.dep-loc-menu {
  min-width: 240px;
}

/* Inside the Custom URL popover's foot row the dropdown sits at the LEFT
     edge, anchor it leftward there so the menu can grow rightward into
     the popover's body. (This selector is also reasserted in the
     drop-up rules under `.dep-add-custom-foot`.) */
.dep-add-custom-foot .dep-loc-menu {
  left: auto;
  right: 0;
}

.dep-add-custom {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dep-add-custom label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-mid);
  /* Grid children default to min-width:auto and can overflow the popover when a
     value/option is long — clamp so fields always shrink to their column. */
  min-width: 0;
}

.dep-add-custom label input,
.dep-add-custom label select {
  width: 100%;
  min-width: 0;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 6px 10px;
  outline: none;
}

/* The Type dropdown shows human labels ("JavaScript (.js)"), not code — a
   monospace face made them too wide to fit the narrow column and clipped to
   "JavaScrip". Use the UI sans face so every option reads in full. */
.dep-add-custom label select {
  font-family: inherit;
}

.dep-add-custom label input:focus,
.dep-add-custom label select:focus {
  border-color: var(--panel-line-2);
}

.dep-add-custom-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  /* fall to second line when the menu + hint don't fit */
  padding-top: 4px;
  border-top: 1px dashed var(--panel-line);
  margin-top: 2px;
}

/* The foot row sits at the bottom of a popover that has `overflow:
     hidden` + a max-height. Any dropdown that opens DOWNWARD here gets
     clipped by the popover edge. Flip the LocationDropdown to open
     UPWARD so the full menu is always visible. */
.dep-add-custom-foot .dep-attrs-menu {
  top: auto;
  bottom: calc(100% + 4px);
  left: auto;
  right: 0;
  min-width: 240px;
  box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.55);
}

.dep-add-custom-foot .dep-attrs-btn {
  /* Give the dropdown trigger a stable width so the foot doesn't jump
       when its label switches between "before </head>" and "before </body>". */
  min-width: 150px;
  justify-content: space-between;
}

.dep-add-row-2 {
  display: grid;
  /* Two-up when the popover is wide enough, but stack to one column in the
     narrow right dock so Version and Type each get their full width (the Type
     dropdown was clipping otherwise). */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.dep-add-hint {
  font-size: 10.5px;
  color: var(--text-dim);
  font-family: 'Plus Jakarta Sans', sans-serif;
  flex: 1;
  min-width: 0;
}

/* ============================================================ */
/*               CHAT TAB v2, multi-state design               */
/* ============================================================ */
.chat2-wrap {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  min-width: 0;
  min-height: 0;
}

/* Sidebar collapsed by default, chat takes the full width. */
.chat2-wrap.side-closed {
  grid-template-columns: 1fr;
}

/* Free build: the whole Chat tab body is the Pro upsell card, centred in the
   panel instead of the grid the real chat uses. */
.chat2-wrap--locked {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
}
.chat2-wrap--locked .pro-lock {
  width: 100%;
  max-width: 320px;
}

/* Header toggle that opens the New-chat + history sidebar. */
.chat-side-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background: var(--panel-bg-2);
  color: var(--text-mid);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.chat-side-toggle:hover {
  color: var(--text-hi);
  border-color: var(--panel-line-2);
}

.chat-side-toggle.on {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: #fff;
}

/* Sidebar header row: New chat + a close button. */
.chat-side-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.chat-side-top .new {
  flex: 1;
  margin-bottom: 0;
}

.chat-side-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.chat-side-close:hover {
  color: var(--text-hi);
  border-color: var(--panel-line-2);
}

.chat2-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  background: var(--panel-bg);
  height: 100%;
}

.chat2-body {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.chat-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-mid);
  font-size: 12px;
}

/* ---- Top status bar ---- */
.chat-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  /* Was `linear-gradient(--panel-bg-2, --panel-bg)`, but those two tokens
     resolve to the SAME colour (see the bridge note by --panel-bg-2), so the
     gradient was flat and the bar read as the panel itself. A neutral grey
     scrim lifts it off the panel and works in both skins — it lightens a dark
     panel and darkens a light one — rather than depending on a surface token. */
  background: rgba(128, 128, 128, 0.30);
  border-bottom: 1px solid var(--panel-line);
  flex-wrap: wrap;
}

.chat-status-spacer {
  flex: 1;
}

.scope-pill {
  display: inline-flex;
  align-items: stretch;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
  height: 26px;
}

.scope-pill-label {
  align-self: center;
  padding: 0 8px 0 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scope-pill button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 11.5px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.scope-pill button:hover {
  color: var(--text-hi);
}

.scope-pill button.on {
  background: var(--panel-bg-4);
  color: var(--text-hi);
  box-shadow: 0 0 0 1px var(--panel-line-2);
}

/* ---- Scenario debug picker ---- */
.scenario-dd {
  position: relative;
}

.scenario-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg-2);
  border: 1px dashed var(--panel-line-2);
  border-radius: 6px;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 11.5px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.scenario-btn:hover,
.scenario-dd.open .scenario-btn {
  color: var(--text-hi);
  background: var(--panel-bg-3);
  border-style: solid;
}

.scenario-tag {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-mid);
  background: var(--panel-bg-3);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.1em;
}

.scenario-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  z-index: 80;
  padding: 4px;
}

.scenario-menu-head {
  padding: 8px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scenario-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--uich-text);
  text-align: right;
}

.scenario-row:hover {
  background: var(--panel-bg-3);
}

.scenario-row.on {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text-hi);
}

.scenario-name {
  font-size: 12.5px;
  font-weight: 500;
}

.scenario-sub {
  font-size: 10.5px;
  color: var(--text-dim);
}

/* ---- Empty state ---- */
.empty-onboarding {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}

.empty-hero {
  text-align: center;
  padding-top: 12px;
}

.empty-mark {
  width: 42px;
  height: 42px;
  margin: 0 auto 14px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--panel-bg-4);
  color: var(--text-hi);
  box-shadow: inset 0 0 0 1px var(--panel-line-2);
}

.empty-hero h3 {
  margin: 0 0 6px;
  color: var(--text-hi);
  font-size: 18px;
  font-weight: 600;
}

.empty-hero p {
  margin: 0;
  color: var(--text-mid);
  font-size: 13px;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.5;
}

.empty-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* The two cards are ALTERNATIVES. They used to be numbered 1 and 2, which reads
   as a sequence — do this, then that — when the point is that you pick one. */
.empty-cards-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.empty-cards-or::before,
.empty-cards-or::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--panel-line);
}

.empty-card {
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Let the grid column shrink below its content's intrinsic width so long
     commands / prompts inside never force the panel to scroll horizontally. */
  min-width: 0;
}

.empty-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.empty-card-titlewrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.empty-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-hi);
  flex: 1 1 auto;
  min-width: 0;
}

.empty-card-providers {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.empty-card-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}

.empty-card-badge.local {
  color: var(--ok);
  background: rgba(227, 237, 93, 0.10);
  border-color: rgba(227, 237, 93, 0.3);
}

.empty-card-badge.cloud {
  color: #7ec8ff;
  background: rgba(126, 200, 255, 0.10);
  border-color: rgba(126, 200, 255, 0.3);
}

.empty-steps {
  margin: 0;
  padding: 0 18px 0 0;
  color: var(--uich-text);
  font-size: 12.5px;
  line-height: 1.75;
}

.empty-steps code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  background: var(--panel-bg-4);
  color: var(--text-hi);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--panel-line-2);
}

.empty-card-body {
  margin: 0;
  color: var(--uich-text);
  font-size: 12.5px;
  line-height: 1.55;
}

.empty-link {
  color: var(--text-hi);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.empty-link:hover {
  text-decoration: underline;
}

.empty-link.sm {
  font-size: 11.5px;
}

.empty-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.empty-foot {
  text-align: center;
  color: var(--text-dim);
  font-size: 11.5px;
  padding-top: 20px;
  margin-top: 4px;
  border-top: 1px solid var(--panel-line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.empty-foot-sep {
  opacity: 0.4;
}

/* ---- Setup card ---- */
/* ── AI welcome / new-chat state (Figma-Make style) ─────────────────────────
   Centered mark + "What do you want to do?" + full-width suggestion cards. */
/* Minimal "quiet list" empty state. Top-aligned (not vertically centred) so the
   suggestions sit close under the prompt and the composer bar stays at the
   bottom — no floating mark, no big empty gap. Borderless rows: whitespace and a
   soft hover fill do the work. All colours are tokens so every skin stays right. */
.ai-setup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Centre the cluster in the space between the tabs and the composer bar so it
     reads as balanced, not stuck at the top with a void below. The composer bar
     is a separate element pinned at the bottom, so centring here never moves it
     — the empty→conversation transition stays jump-free. */
  justify-content: center;
  flex: 1 1 auto;
  padding: 16px;
  /* Even vertical rhythm between the mark, the prompt and the list. Replaces the
     per-element margins so the spacing stays consistent. */
  gap: 16px;
  text-align: right;
}

/* Context line: names what's selected ("Editing Heading") so the suggestions
   read as targeted rather than generic. */
.ai-setup-ctx {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.ai-setup-ctx-ico {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-mid);
}

/* The AI glyph is the mark for this empty state on EVERY skin. Both marks are
   still rendered by the Pro chat bundle; CSS decides which one shows.
   The Elementor skin used to swap in Elementor's own logo here. That broke the
   house rule that skins differ in COLOUR only, never in iconography — and it put
   the builder's badge on a panel that is about AI, not about Elementor. */
.ai-setup-ctx-ico .ai-setup-ico {
  display: inline-flex;
  line-height: 0;
}

.ai-setup-ctx-ico .ai-setup-ico-el {
  display: none;
}

/* Recolour the glyph's gradient PER SKIN. `stop-color` is a real CSS property,
   so the stops inside the Pro bundle's inline <svg> can be restyled from here —
   a CSS-only change in this repo, where the rest of the chat's styling already
   lives, with no Pro-side edit or rebuild. (A CSS rule also beats an SVG
   presentation attribute, so the markup's own #FFC574 / #FD6A35 attributes stay
   in place and lose.)

   This used to be pinned to ONE pink pair for every skin, which was wrong: it
   put ELEMENTOR's colour on the UiChemy skin. The mark now follows whichever
   skin is active — UiChemy orange (:root, above), Elementor pink and Gutenberg
   blue (composer-skin-tokens.css). Custom properties inherit, so the skin
   attribute on the host reaches these <stop> elements even though they sit
   several levels down inside the SVG's <defs>. */
#uich-ai-glyph-grad stop:first-child {
  stop-color: var(--ai-glyph-from);
}

#uich-ai-glyph-grad stop:last-child {
  stop-color: var(--ai-glyph-to);
}

.ai-setup-ctx-el {
  color: var(--text-hi);
  font-weight: 600;
}

.ai-setup-title {
  margin: 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-hi);
}

.ai-setup-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Bordered suggestion card: icon + label + a go arrow that slides in on hover. */
.ai-setup-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background: var(--panel-bg-2);
  color: var(--text-hi);
  font-family: inherit;
  font-size: 13px;
  text-align: right;
  cursor: pointer;
  transition: background-color 0.13s ease, border-color 0.13s ease;
}

/* Tailwind preflight resets `.uich-tw button { background: transparent }`, which
   outranks the plain selector — reassert the card fill under the host scope. */
.uich-tw .ai-setup-row {
  background: var(--panel-bg-2);
}

.ai-setup-row:hover,
.uich-tw .ai-setup-row:hover {
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
}

.ai-setup-row-ico {
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  justify-content: center;
  color: var(--text-mid);
}

.ai-setup-row-label {
  flex: 1 1 auto;
  min-width: 0;
}

.ai-setup-row-go {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-dim);
  opacity: 0;
  transform: translateX(3px);
  transition: opacity 0.13s ease, transform 0.13s ease;
}

.ai-setup-row:hover .ai-setup-row-go {
  opacity: 1;
  transform: none;
}

/* The first row wears the hover look at rest (a gentle "start here" hint) and
   hands it off to whichever row the pointer is actually over — pure CSS. */
.ai-setup-row.is-featured,
.uich-tw .ai-setup-row.is-featured {
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
}

.ai-setup-row.is-featured .ai-setup-row-go {
  opacity: 1;
  transform: none;
}

.ai-setup-list:hover .ai-setup-row.is-featured:not(:hover),
.uich-tw .ai-setup-list:hover .ai-setup-row.is-featured:not(:hover) {
  background: var(--panel-bg-2);
  border-color: var(--panel-line);
}

.ai-setup-list:hover .ai-setup-row.is-featured:not(:hover) .ai-setup-row-go {
  opacity: 0;
  transform: translateX(3px);
}

.setup-card {
  margin: 20px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.setup-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.setup-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--panel-bg-4);
  color: var(--text-hi);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--panel-line-2);
}

.setup-head h3 {
  margin: 0 0 4px;
  color: var(--text-hi);
  font-size: 15px;
  font-weight: 600;
}

.setup-head p {
  margin: 0;
  color: var(--text-mid);
  font-size: 12.5px;
  line-height: 1.4;
}

.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.setup-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setup-field.full {
  grid-column: 1 / -1;
}

.setup-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.setup-seg {
  display: flex;
  gap: 4px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 6px;
  padding: 3px;
}

.setup-seg button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border: 0;
  background: none;
  flex: 1;
  height: 30px;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 4px;
}

.setup-seg button:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

.setup-seg button.on {
  background: var(--panel-bg-3);
  color: var(--text-hi);
  box-shadow: 0 0 0 1px var(--panel-line-2);
}

.setup-target {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 6px;
  flex-wrap: wrap;
}

.setup-target-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

.setup-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.setup-suggest-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 4px;
}

.setup-suggest-chip {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 6px;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 11.5px;
  padding: 5px 10px;
}

.setup-suggest-chip:hover {
  color: var(--text-hi);
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
}

/* ---- Model picker ---- */
.model-dd {
  position: relative;
  display: inline-block;
}

.model-dd.full {
  display: block;
}

.model-dd.full .model-btn {
  width: 100%;
  justify-content: space-between;
}

.model-dd.full .model-menu {
  width: 100%;
}

.model-dd.drop-down .model-menu {
  top: calc(100% + 6px);
  bottom: auto;
}

.model-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 12px;
  height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.model-btn:hover,
.model-dd.open .model-btn {
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
}

.model-dd.disabled .model-btn {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.model-name {
  font-weight: 500;
  color: var(--text-hi);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  width: 260px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  z-index: 80;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.model-tabs {
  display: flex;
  border-bottom: 1px solid var(--panel-line);
  flex-shrink: 0;
  padding: 4px 4px 0;
  gap: 2px;
}

.model-tab {
  flex: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: none;
  border: 0;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 0 6px;
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.02em;
  text-align: center;
  transition: color 0.15s;
}

.model-tab:hover {
  color: var(--uich-text);
}

.model-tab.on {
  color: var(--text-hi);
  border-bottom-color: hsl(var(--primary));
}

/* `.empty` is a visual hint that the tab has no items, NOT a disabled state.
     The tab is still clickable, clicking shows the connect-help panel. */
.model-tab.empty {
  opacity: 0.55;
  cursor: pointer;
}

.model-tab.empty:hover {
  opacity: 0.85;
}

.model-list {
  overflow-y: auto;
  max-height: 300px;
  padding: 4px;
}

.model-empty {
  padding: 16px 12px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

/* ── Empty-tab connect-help panel ─────────────────────────────────────
     Shown inside the model dropdown when the active tab has no models.
     Wording mirrors the empty-state cards (function EmptyState). */
.model-connect {
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.model-connect-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hi);
}

.model-connect-body {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

.model-connect-steps {
  margin: 0;
  padding-right: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

.model-connect-steps code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--uich-text);
  background: var(--panel-bg-3);
  padding: 1px 5px;
  border-radius: 3px;
}

.model-connect-cta {
  align-self: flex-start;
  margin-top: 2px;
}

.model-group {
  padding: 8px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.model-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--uich-text);
  text-align: right;
  font-size: 12.5px;
}

.model-row:hover {
  background: var(--panel-bg-3);
}

.model-row.on {
  color: var(--text-hi);
  font-weight: 600;
}

.model-row.on svg {
  color: var(--text-hi);
}

/* ---- Messages ---- */
.chat-msgs {
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.msg2 {
  display: flex;
  gap: 12px;
  max-width: 820px;
}

.msg2-av {
  width: 24px;
  height: 24px;
  border-radius: var(--radius);
  background: var(--panel-bg-3);
  display: grid;
  place-items: center;
  color: var(--text-mid);
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
}

/* AI turns carry a subtle brand tint on the avatar so the assistant is
   instantly distinguishable from the user at a glance (accent-rgb is
   redefined per skin, so this stays on-brand in every theme). */
.msg2.ai .msg2-av {
  background: var(--accent-bg);
  color: var(--text-hi);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}

.msg2.ai-process .msg2-av {
  background: var(--panel-bg-3);
  color: var(--text-mid);
  box-shadow: 0 0 0 1px var(--panel-line-2) inset;
}

.msg2-body {
  flex: 1;
  min-width: 0;
}

/* User turns read as a right-aligned bubble (Gemini / Base44 pattern): no avatar
   or name, text in a subtle rounded chip. AI turns stay full-width with an
   avatar + tools, so the two speakers are instantly distinguishable. CSS-only —
   the markup already tags .msg2.user vs .msg2.ai. */
.msg2.user {
  justify-content: flex-end;
}
.msg2.user .msg2-av,
.msg2.user .msg2-meta {
  display: none;
}
.msg2.user .msg2-body {
  flex: 0 1 auto;
  max-width: 82%;
}
.msg2.user .msg2-text {
  padding: 7px 11px;
  border-radius: var(--radius);
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line-2);
  color: var(--text-hi);
}

.msg2-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.msg2-meta b {
  color: var(--text-hi);
  font-weight: 600;
  font-size: 12.5px;
}

.msg2-model {
  margin-right: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mid);
  background: var(--panel-bg-3);
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--panel-line);
}

.msg2-text {
  color: var(--uich-text);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* Markdown styling inside chat message bubbles */
.msg2-text pre {
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line-2);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
  overflow-x: auto;
}

.msg2-text code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--uich-text);
}

.msg2-text p {
  margin: 0 0 8px 0;
}

.msg2-text p:last-child {
  margin-bottom: 0;
}

.msg2-text .uich-md-h {
  color: var(--text-hi);
  font-weight: 600;
  margin: 14px 0 6px 0;
}

.msg2-text .uich-md-ul,
.msg2-text .uich-md-ol {
  padding-right: 20px;
  margin: 8px 0;
}

.msg2-text li {
  margin-bottom: 4px;
}

/* Inline code format inside message lines */
.msg2-text :not(pre)>code {
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 11.5px;
}

/* ── UI/UX redesign: message surfaces ─────────────────────────────────────
   The JSX sets the bubble fill inline via Tailwind (user = bg-primary, a loud
   high-contrast block; ai = bg-muted). These higher-specificity rules re-skin
   colour + radius only — no markup change, all handlers intact.
   • User turn  → a soft raised surface instead of a bright slab.
   • AI turn    → a bordered result card so long answers read as content.
   The sharper top-left corner anchors each bubble to its avatar/meta. */
.msg2.user .msg2-text {
  background: var(--panel-bg-3);
  color: var(--text-hi);
  border: 1px solid var(--panel-line-2);
  border-radius: 11px 4px 11px 11px;
  padding: 9px 12px;
}

.msg2.ai .msg2-text {
  background: var(--panel-bg-2);
  color: var(--uich-text);
  border: 1px solid var(--panel-line);
  border-radius: 11px 4px 11px 11px;
  padding: 10px 13px;
}

.msg2-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 6px;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 3px 8px;
}

/* The leading target glyph stays quiet so the label reads first. */
.ctx-chip > svg:first-child {
  color: var(--text-mid);
}

.ctx-chip button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1;
  padding: 0 3px 0 0;
}

.ctx-chip button:hover {
  color: var(--uich-danger);
}

.ctx-chip.add {
  cursor: pointer;
  color: var(--text-mid);
  border-style: dashed;
}

.ctx-chip.add:hover {
  color: var(--text-hi);
  border-color: var(--panel-line-2);
}

.ctx-chip.pick {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: inherit;
  border-style: dashed;
}

.ctx-chip.pick:hover,
.ctx-chip.pick.picking {
  color: var(--text-hi);
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
  border-style: solid;
}

.ctx-chip.picked {
  color: var(--text-hi);
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
  font-weight: 600;
}

/* ── Elementor Globals toggle ──────────────────────────────────────────── */
/* Used in two places:                                                       */
/*   .var-pill , compact pill in the composer footer beside ModelPicker     */
/*   .var-block, full-width control in SetupCard alongside other fields     */
.globals-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  color: var(--uich-text);
}

.globals-toggle.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.globals-toggle-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line);
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  line-height: 1;
}

.globals-toggle-btn:disabled {
  cursor: default;
}

.globals-toggle-more {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--panel-line);
  border-right: 0;
  background: var(--panel-bg-3);
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.globals-toggle-more:hover {
  color: var(--text-hi);
}

.globals-toggle.open .globals-toggle-btn,
.globals-toggle.open .globals-toggle-more {
  border-color: var(--panel-line-2);
  background: var(--panel-bg-2);
}

.globals-toggle.on .globals-toggle-btn {
  border-color: var(--panel-line-2);
}

.globals-toggle.off .globals-toggle-label,
.globals-toggle.off .globals-toggle-sub {
  opacity: 0.6;
}

/* Mini switch */
.globals-toggle-sw {
  width: 22px;
  height: 12px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex: 0 0 22px;
}

.globals-toggle-sw-knob {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  background: var(--text-mid);
  border-radius: 999px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.globals-toggle-sw.on {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.globals-toggle-sw.on .globals-toggle-sw-knob {
  transform: translateX(-10px);
  background: #fff;
}

.globals-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--text-hi);
  white-space: nowrap;
}

.globals-toggle-sub {
  color: var(--text-dim);
  font-size: 10px;
  white-space: nowrap;
}

/* Pill variant, footer */
.globals-toggle.var-pill .globals-toggle-btn {
  border-radius: 0 999px 999px 0;
  padding: 4px 6px 4px 8px;
  font-size: 11px;
}

.globals-toggle.var-pill .globals-toggle-more {
  border-radius: 999px 0 0 999px;
  padding: 4px 6px;
}

.globals-toggle.var-pill .globals-toggle-sub {
  /* Hide the secondary count in the tight footer; popover shows full detail */
  display: none;
}

/* Block variant, SetupCard */
.globals-toggle.var-block {
  width: 100%;
}

.globals-toggle.var-block .globals-toggle-btn {
  flex: 1;
  justify-content: flex-start;
  border-radius: 0 6px 6px 0;
  padding: 8px 10px;
  font-size: 12px;
  gap: 8px;
}

.globals-toggle.var-block .globals-toggle-more {
  border-radius: 6px 0 0 6px;
  padding: 8px 10px;
}

.globals-toggle.var-block .globals-toggle-sub {
  margin-right: auto;
  font-size: 11px;
}

.setup-field-globals {
  grid-column: 1 / -1;
}

.globals-pop {
  position: absolute;
  z-index: 100;
  min-width: 280px;
  max-width: 360px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--uich-text);
}

.globals-toggle.dir-up .globals-pop {
  bottom: calc(100% + 6px);
  left: 0;
}

.globals-toggle.dir-down .globals-pop {
  top: calc(100% + 6px);
  right: 0;
}

.globals-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.globals-pop-link {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-mid);
  font-size: 11px;
  font-family: inherit;
  text-decoration: underline;
  padding: 0;
}

.globals-pop-link:hover:not(:disabled) {
  color: var(--text-hi);
}

.globals-pop-link:disabled {
  opacity: 0.5;
  cursor: default;
}

.globals-pop-body {
  color: var(--text-mid);
  line-height: 1.5;
}

.globals-pop-counts {
  display: flex;
  gap: 12px;
  color: var(--uich-text);
  margin-bottom: 6px;
}

.globals-pop-state {
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 6px;
}

.globals-pop-err {
  color: var(--uich-danger);
}

.globals-pop-empty {
  color: var(--text-dim);
}

.globals-pop-empty code {
  background: var(--panel-bg-3);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}

.globals-pop-snapshot summary {
  cursor: pointer;
  color: var(--text-mid);
  margin: 6px 0 4px;
  padding: 2px 0;
}

.globals-pop-snapshot summary:hover {
  color: var(--text-hi);
}

.globals-pop-snapshot pre {
  max-height: 220px;
  overflow: auto;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  padding: 8px;
  font-size: 10px;
  line-height: 1.45;
  white-space: pre;
  color: var(--uich-text);
  margin: 0;
}

/* Targeting banner (after pick) */
.picked-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--panel-bg-2);
  border-bottom: 1px solid var(--panel-line-2);
  color: var(--uich-text);
  font-size: 12px;
}

.picked-banner svg {
  color: var(--text-mid);
  flex-shrink: 0;
}

.picked-banner b {
  color: var(--text-hi);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.picked-banner-clear {
  margin-right: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-dim);
  display: grid;
  place-items: center;
}

.picked-banner-clear:hover {
  color: var(--uich-danger);
  background: rgba(255, 122, 122, 0.1);
}

/* Picking overlay (when "Pick" mode is active, chat content fades; canvas takes focus) */
.chat2-main.picking .chat2-body {
  opacity: 0.25;
  pointer-events: none;
}

.pick-overlay {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Follows the PANEL, it does not impose a colour. The overlay's own contents
     are already `var(--text-hi)` — near-black on a light panel — and they were
     sitting on a 40% BLACK veil, so dark text met a dark scrim and the whole
     thing read as muddy grey. A veil mixed from the panel's own background is
     white where the panel is white and dark where it is dark, so the contrast
     is right either way instead of only in dark mode.

     rgba first as the fallback for engines without color-mix; white, because
     that is the panel in every light skin. */
  background: rgba(255, 255, 255, 0.78);
  background: color-mix(in srgb, var(--panel-bg) 78%, transparent);
  backdrop-filter: blur(2px);
  z-index: 100;
  pointer-events: none;
}

.pick-overlay-cursor {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--panel-bg-4);
  color: var(--text-hi);
  /* Was 0.5 black, which was calibrated against the dark veil and reads as a
     smudge on a light one. */
  box-shadow: 0 8px 24px rgba(16, 18, 32, 0.16), inset 0 0 0 1px var(--panel-line-2);
  animation: pick-pulse 1.2s ease-in-out infinite;
}

@keyframes pick-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

.pick-overlay-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text-hi);
  text-align: center;
}

.pick-overlay-msg b {
  font-size: 14px;
  font-weight: 600;
}

/* Button row, Done + Cancel sit side by side */
.pick-overlay-btn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  pointer-events: all;
}

.pick-overlay-btn-row button {
  padding: 5px 16px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  background: var(--panel-bg-4, rgba(255, 255, 255, 0.08));
  color: var(--text-hi);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

/* Done, accent colour */
.pick-overlay-btn-row .pick-overlay-done {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: #ffffff;
}

.pick-overlay-btn-row .pick-overlay-done:hover {
  background: color-mix(in srgb, hsl(var(--primary)) 85%, #ffffff);
  border-color: color-mix(in srgb, hsl(var(--primary)) 85%, #ffffff);
  color: #ffffff;
}

.pick-overlay-btn-row .pick-overlay-cancel:hover {
  background: var(--panel-bg-5, rgba(255, 255, 255, 0.14));
  border-color: var(--border-mid, rgba(255, 255, 255, 0.22));
}

.chat2-main {
  position: relative;
}

.msg2-images {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.msg2-image {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  color: white;
  font-size: 11.5px;
  font-weight: 500;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.msg2-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ── UI/UX redesign: per-message hover tools (AI replies) ─────────────────
   A quiet action row that fades in on hover, so common actions (copy) are
   one reach away without cluttering the reply. */
.msg2-tools {
  display: flex;
  gap: 2px;
  margin-top: 5px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.msg2:hover .msg2-tools,
.msg2-tools:focus-within {
  opacity: 1;
}

.msg2-tool {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--text-dim);
  display: grid;
  place-items: center;
  transition: color 0.12s, background-color 0.12s;
}

.msg2-tool:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

.msg2-tool.ok {
  color: var(--ok);
}

/* ── UI/UX redesign: follow-up chips after a settled AI turn ──────────────
   Quick next-steps that reuse the composer's real send path. Aligned to the
   message body (avatar 24 + gap 12). */
.chat-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-right: 36px;
}

.chat-followup {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--uich-text);
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: var(--radius);
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.12s, background-color 0.12s, color 0.12s;
}

.chat-followup:hover {
  color: var(--text-hi);
  border-color: rgba(var(--accent-rgb), 0.6);
  background: var(--accent-bg);
}

.chat-followup > svg {
  color: hsl(var(--primary));
}

/* ---- Process / thinking block ---- */
.process-head {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border: 0;
  background: none;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  color: var(--text-mid);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 0;
}

/* Disclosure caret sits at the RIGHT edge of the row (dropdown affordance),
   pushed there by auto margin. Rotates -90° when the steps are collapsed. */
.process-caret {
  margin-right: auto;
  flex: 0 0 auto;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}

.process-head svg.rot {
  transform: rotate(90deg);
}

.process-title {
  color: var(--text-hi);
}

.process-time {
  color: var(--text-dim);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
  border-right: 1.5px solid rgba(var(--accent-rgb), 0.35);
  margin-right: 5px;
}

.process-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 0;
  color: var(--text-mid);
  font-size: 12px;
}

.process-step-marker {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
}

/* A completed step gets a quiet filled check-disc so the eye can scan the
   run down the list; the accent tint ties it to the spine above. */
.process-step.status-done .process-step-marker {
  color: var(--text-hi);
  background: var(--accent-bg);
}

.process-step.status-done .process-step-name {
  color: var(--uich-text);
}

.process-step.status-run .process-step-marker {
  color: var(--text-hi);
}

.process-step.status-run .process-step-name {
  color: var(--text-hi);
}

.process-step.status-wait .process-step-marker {
  color: var(--text-dim);
}

.process-step.status-err .process-step-marker {
  color: var(--uich-danger);
}

.process-step .dash {
  color: var(--text-dim);
  font-size: 10px;
}

.process-step-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
}

.process-step-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  margin-right: 4px;
}

.spin {
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ---- Inline error blocks ---- */
.inline-err {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 122, 122, 0.06);
  border: 1px solid rgba(255, 122, 122, 0.3);
  border-radius: 10px;
  color: var(--uich-text);
}

.inline-err.warn {
  background: rgba(255, 209, 102, 0.06);
  border-color: rgba(255, 209, 102, 0.4);
}

.inline-err-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 122, 122, 0.12);
  color: var(--uich-danger);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.inline-err.warn .inline-err-icon {
  background: rgba(255, 209, 102, 0.12);
  color: var(--warn);
}

.inline-err-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
  margin-bottom: 4px;
}

.inline-err-text {
  font-size: 12px;
  color: var(--uich-text);
  line-height: 1.55;
}

.inline-err-quota {
  display: block;
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mid);
}

.inline-err-quota b {
  color: var(--warn);
}

.inline-err-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

/* ---- Auth error toast ---- */
/* ---- Unified error toast ---- */
.err-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 12px 8px;
  padding: 12px 14px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255, 122, 122, 0.06);
  border: 1px solid rgba(255, 122, 122, 0.28);
}

.err-toast-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 122, 122, 0.12);
  color: var(--uich-danger);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.err-toast-body {
  flex: 1;
  min-width: 0;
}

.err-toast-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-hi);
  margin-bottom: 3px;
}

.err-toast-text {
  font-size: 11.5px;
  color: var(--text-mid);
  line-height: 1.55;
}

.err-toast-dismiss {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 4px;
  border-radius: 4px;
}

.err-toast-dismiss:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

/* warn variant, quota / connection */
.err-toast.warn {
  background: rgba(255, 209, 102, 0.06);
  border-color: rgba(255, 209, 102, 0.35);
}

.err-toast.warn .err-toast-icon {
  background: rgba(255, 209, 102, 0.12);
  color: var(--warn);
}

/* ---- Composer ----
   A rounded input card floating above the panel floor (Gemini / Copilot
   pattern) instead of a flat full-width bar welded to the bottom edge. */
.chat-composer {
  margin: 10px;
  border: 1px solid var(--panel-line-2);
  border-radius: var(--radius);
  background: var(--panel-bg-3);
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 16px -10px rgba(0, 0, 0, 0.5);
}
.chat-composer:focus-within {
  border-color: var(--panel-line-2);
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.6);
}

.composer-images {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

.chat-composer.disabled {
  opacity: 0.55;
}

.composer-ctx {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
}

.composer-ctx-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 2px;
}

.composer-ctx-spacer {
  flex: 1;
}

.composer-scope-hint {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

.composer-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.composer-image {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 4px;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
}

.composer-image-thumb {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: white;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.composer-image-meta {
  display: flex;
  flex-direction: column;
  padding-left: 6px;
}

.composer-image-name {
  font-size: 12px;
  color: var(--text-hi);
  font-weight: 500;
  line-height: 1.2;
}

.composer-image-size {
  font-size: 10.5px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

.composer-image-x {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-dim);
  display: grid;
  place-items: center;
}

.composer-image-x:hover {
  color: var(--uich-danger);
  background: rgba(255, 122, 122, 0.12);
}

.composer-drop {
  position: absolute;
  inset: 4px;
  background: var(--panel-bg-3);
  border: 2px dashed var(--panel-line-2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--uich-text);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  z-index: 5;
}

/* Unified prompt box, the textarea AND the toolbar (attach · model · Send)
   live inside ONE bordered container, like a modern AI composer. */
.composer-input {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line-2);
  border-radius: 10px;
  padding: 12px 12px 10px 12px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

/* A clear accent focus ring — the composer is the primary action in this
   panel, so it should visibly light up when active. */
.composer-input:focus-within {
  border-color: rgba(var(--accent-rgb), 0.90);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

.composer-input textarea,
.chat-composer .composer-input textarea {
  width: 100%;
  background: transparent;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 13px;
  padding: 2px 2px 0;
  outline: none !important;
  resize: none;
  min-height: 72px;
}

.chat-composer .composer-input textarea:focus,
.chat-composer .composer-input textarea:focus-visible {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.composer-input textarea:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.composer-foot {
  display: flex;
  align-items: center;
  gap: 6px;
}

.composer-foot-spacer {
  flex: 1;
}

/* Let the model picker give up width first (its name truncates via the
   ellipsis it already has) before the Send button has to, so both stay
   readable as the panel narrows. Scoped to the chat footer, the published
   page uses this same markup, so it's fixed there too, and no other model
   picker (or the .full variant) is affected. */
.composer-foot .model-dd {
  display: flex;
  min-width: 0;
  flex-shrink: 3;
}

.composer-foot .model-btn {
  min-width: 0;
}

.composer-foot .model-name {
  min-width: 0;
}

/* Only the model name truncates, the caret/chevron and the loading spinner
   keep their intrinsic size instead of getting squished to nothing. */
.composer-foot .model-btn > svg,
.composer-foot .model-btn > .spin {
  flex: none;
}

.composer-foot-divider {
  width: 1px;
  height: 18px;
  background: var(--panel-line);
  margin: 0 4px;
}

.composer-iconbtn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  color: var(--text-mid);
  display: grid;
  place-items: center;
}

.composer-iconbtn:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
  border-color: var(--panel-line-2);
}

.composer-iconbtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.composer-token-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-dim);
}

.composer-token-bar {
  display: inline-block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--panel-bg-3);
  overflow: hidden;
}

.composer-token-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(-90deg, var(--ok), var(--warn));
}

.composer-send {
  min-width: 0;
  overflow: hidden;
}

.composer-send .kbd {
  margin-right: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  opacity: 0.7;
}

/* Stop button, shown in place of Send while AI is working */
.composer-stop {
  background: rgba(220, 60, 60, 0.12);
  border-color: rgba(220, 60, 60, 0.35);
  color: #e05555;
  gap: 5px;
}

.composer-stop:hover {
  background: rgba(220, 60, 60, 0.22);
  border-color: rgba(220, 60, 60, 0.55);
  color: #f06060;
}

/* Solid square stop icon */
.stop-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 1px;
  flex-shrink: 0;
}

/* ---- Side panel ---- */
.chat-side {
  border-left: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.chat-side .new {
  margin-bottom: 8px;
  justify-content: center;
}

.chat-side-section {
  padding: 6px 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chat-side-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 11.5px;
  color: var(--text-dim);
  opacity: 0.8;
}

.chat-side .ctile {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-mid);
  position: relative;
}

.chat-side .ctile:hover {
  background: var(--panel-bg-3);
  color: var(--uich-text);
}

.chat-side .ctile.on {
  background: var(--panel-bg-3);
  color: var(--text-hi);
  box-shadow: inset 0 0 0 1px var(--panel-line-2);
}

/* ── Left-edge status indicator (dots column) ───────────────────────────
     Fixed 14px wide so the tile body never shifts regardless of state.
     3 dots (2.5px × 3) + gaps (2px × 2) = 11.5px, 14px gives breathing room.
     Height matches the title row (18px) so the dot centres on the title text. */
.ctile-indicator {
  flex-shrink: 0;
  width: 14px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Single solid dot, shown when the tile is active/selected but idle */
.ctile-dot-single {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--primary));
  flex-shrink: 0;
}

/* Unread dot, conversation got an AI response the user hasn't viewed yet */
.ctile-dot-unread {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--primary));
  flex-shrink: 0;
  animation: ctile-dot-unread-pulse 2.4s ease-in-out infinite;
}

@keyframes ctile-dot-unread-pulse {

  0%,
  60%,
  100% {
    opacity: 0.55;
    transform: scale(0.85);
  }

  30% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Body (title row + preview) fills the remaining width */
.ctile-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Title row: flex so timestamp sits inline, title truncates.
     NOTE: overflow stays `visible` here so the kebab popover can escape
     the row. The title still truncates because `.ctile-t` has its own
     `overflow: hidden` + `text-overflow: ellipsis`. */
.ctile-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.ctile-t {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-hi);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.4;
  padding-bottom: 2px;
}

/* ── Right-edge slot (time / kebab share the same position) ─────────── */
.ctile-end {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-width: 22px;
  min-height: 18px;
  margin-right: auto;
}

.ctile-when {
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  line-height: 1;
  transition: opacity 120ms ease;
}

.chat-side .ctile:hover .ctile-when,
.chat-side .ctile.menu-open .ctile-when {
  opacity: 0;
}

/* ── Kebab button ───────────────────────────────────────────────────────*/
.ctile-kebab {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-dim);
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

.chat-side .ctile:hover .ctile-kebab,
.chat-side .ctile.menu-open .ctile-kebab {
  opacity: 1;
  pointer-events: auto;
}

.ctile-kebab:hover,
.chat-side .ctile.menu-open .ctile-kebab {
  background: var(--panel-bg-4, rgba(255, 255, 255, 0.10));
  color: var(--text-hi);
}

.ctile-kebab:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 1px solid var(--panel-line-2);
  outline-offset: 1px;
}

/* Preview: single line, no raw markdown bleed */
.ctile-s {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  padding-bottom: 2px;
}

/* ── Three-dot indicator (running / queued) ─────────────────────────────
     Running  → animated orange dots  (warm, draws the eye → "work in progress")
     Queued   → static gray dots      (muted → "waiting its turn") */
.ctile-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.ctile-dots span {
  display: block;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: #f97316;
  animation: ctile-dot-pulse 1.3s ease-in-out infinite;
  opacity: 0.5;
}

.ctile-dots span:nth-child(1) {
  animation-delay: 0s;
}

.ctile-dots span:nth-child(2) {
  animation-delay: 0.22s;
}

.ctile-dots span:nth-child(3) {
  animation-delay: 0.44s;
}

@keyframes ctile-dot-pulse {

  0%,
  70%,
  100% {
    opacity: 0.4;
    transform: scale(0.8);
    background: #f97316;
  }

  35% {
    opacity: 1;
    transform: scale(1.1);
    background: #fb923c;
  }
}

/* Queued = slower, dimmer pulse in gray, animated but clearly different from running */
.ctile-dots.queued span {
  background: #9e9ea8;
  animation: ctile-dot-queue 2s ease-in-out infinite;
}

.ctile-dots.queued span:nth-child(1) {
  animation-delay: 0s;
}

.ctile-dots.queued span:nth-child(2) {
  animation-delay: 0.35s;
}

.ctile-dots.queued span:nth-child(3) {
  animation-delay: 0.7s;
}

@keyframes ctile-dot-queue {

  0%,
  60%,
  100% {
    opacity: 0.2;
    transform: scale(0.8);
    background: #9e9ea8;
  }

  30% {
    opacity: 0.6;
    transform: scale(1);
    background: #c4c4cb;
  }
}

/* ---- Gradient builder (gp) ---- */
.gp {
  display: flex;
  flex-direction: column;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
}

/* header, full-width type selector */
.gp-header {
  display: flex;
  padding: 8px 10px;
}

/* Gradient type strip now uses the shared shadcn segmented-control classes
   (SEG_* in composer-gradient.jsx) to match every other tab strip, the old
   .gp-type-tabs / .gp-type-tab rules were removed. */

.gp-hbtns {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gp-tip-wrap {
  position: relative;
}

.gp-hbtn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--panel-line);
  cursor: pointer;
  background: var(--panel-bg-3);
  border-radius: 5px;
  color: var(--text-mid);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  transition: color .12s, background .12s, border-color .12s;
}

.gp-hbtn:hover {
  background: var(--panel-bg-4);
  border-color: var(--panel-line-2);
  color: var(--text-hi);
}

/* ── type-specific settings block ── */
.gp-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--panel-line);
}

.gp-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
}

.gp-set-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mid);
}

.gp-set-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gp-set-field {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 7px;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
}

.gp-set-axis {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
}

.gp-set-num {
  width: 40px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-hi);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-align: center;
}

.gp-set-num::-webkit-outer-spin-button,
.gp-set-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gp-set-unit {
  font-size: 11px;
  color: var(--text-dim);
}

.gp-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  padding: 2px;
}

.gp-seg-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  height: 20px;
  padding: 0 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: color .12s, background .12s;
}

.gp-seg-btn:hover {
  color: var(--text-hi);
}

.gp-seg-btn.on {
  background: var(--panel-bg);
  color: var(--text-hi);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.gp-tip {
  position: absolute;
  bottom: calc(100% + 5px);
  right: 50%;
  transform: translateX(50%);
  white-space: nowrap;
  background: var(--panel-bg-4);
  border: 1px solid var(--panel-line-2);
  border-radius: 4px;
  color: var(--text-hi);
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 7px;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

.gp-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 50%;
  transform: translateX(50%);
  border: 4px solid transparent;
  border-top-color: var(--panel-bg-4);
}

/* divider between solid color field and gradient builder inside Color tab */
/* Background ▸ Color tab. Capped at half-width in the wide bottom dock so the
   color swatch + gradient builder don't stretch across the whole panel. The
   narrow right dock has no width to spare, so let it fill fully (see the
   dock-right override in composer-dock.css). */
.bg-color-rows {
  max-width: 50%;
}

.gp-section-divider {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* background color label styled to match the gradient label exactly */
.pf-background-bgColor .pf-name-text {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Remove button inside the Gradient divider row */
.gp-gradient-remove-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  cursor: pointer;
  background: transparent;
  border-radius: 0;
  color: var(--text-dim);
  width: 16px;
  height: 16px;
  padding: 0;
  margin-right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .12s;
}

.gp-gradient-remove-btn:hover {
  color: var(--uich-danger, #e05555);
}

/* Remove btns, visible only on hover when value is set */
.pf-background-bgColor .gp-gradient-remove-btn,
.gp-section-divider .gp-gradient-remove-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s, color .12s;
}

.pf-background-bgColor:hover .gp-gradient-remove-btn,
.gp-section-divider:hover .gp-gradient-remove-btn {
  opacity: 1;
  pointer-events: auto;
}

/* generated css preview row */
.gp-css-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--panel-line);
}

.gp-css-inp {
  flex: 1;
  min-width: 0;
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  color: var(--uich-text);
  font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 5px 7px;
  outline: none;
}

.gp-css-inp:hover {
  border-color: var(--panel-line-2);
}

.gp-css-inp:focus {
  border-color: var(--panel-line-2);
  color: var(--text-hi);
}

/* preview bar (horizontal) */
.gp-bar-wrap {
  position: relative;
  height: 36px;
  margin: 10px 10px 16px;
  border-radius: 6px;
  border: 1px solid var(--panel-line);
}

.gp-bar-checker {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background:
    linear-gradient(-45deg, var(--panel-bg-4) 25%, transparent 25%, transparent 75%, var(--panel-bg-4) 75%) 0 0 / 10px 10px,
    linear-gradient(-45deg, var(--panel-bg-4) 25%, transparent 25%, transparent 75%, var(--panel-bg-4) 75%) 5px 5px / 10px 10px,
    var(--panel-bg-3);
}

.gp-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  cursor: crosshair;
}

.gp-handle {
  position: absolute;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  transform: translateX(50%);
  background: var(--hc, #888);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.4);
  cursor: grab;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: transform .1s, box-shadow .1s;
  z-index: 2;
}

.gp-handle::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 50%;
  transform: translateX(50%);
  border: 4px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.9);
  border-bottom: none;
}

.gp-handle:active {
  cursor: grabbing;
}

.gp-handle:hover {
  transform: translateX(50%) scale(1.1);
}

.gp-handle.active {
  transform: translateX(50%) scale(1.15);
  border-color: #fff;
  box-shadow: 0 0 0 2px hsl(var(--primary)), 0 2px 6px rgba(0, 0, 0, 0.5);
}

.gp-handle.active::after {
  border-top-color: #fff;
}

/* angle row */
.gp-angle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 10px;
}

.gp-dim-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.gp-angle-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  padding: 0 2px 0 7px;
  height: 26px;
  transition: border-color .12s;
}

.gp-angle-field:focus-within {
  border-color: var(--panel-line-2);
}

.gp-angle-inp {
  background: transparent;
  border: 0;
  outline: none;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  width: 44px;
  text-align: center;
  height: 100%;
  -moz-appearance: textfield;
}

.gp-angle-inp::-webkit-outer-spin-button,
.gp-angle-inp::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.gp-unit {
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  flex-shrink: 0;
  pointer-events: none;
}

/* stops block */
.gp-stops-block {
  border-top: 1px solid var(--panel-line);
}

.gp-stops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px 5px;
}

.gp-add-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--panel-line);
  cursor: pointer;
  background: var(--panel-bg-3);
  border-radius: 4px;
  color: var(--text-mid);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  transition: color .12s, background .12s, border-color .12s;
  padding: 0;
}

.gp-add-btn:hover {
  background: var(--panel-bg-4);
  border-color: var(--panel-line-2);
  color: var(--text-hi);
}

.gp-stops-list {
  display: flex;
  flex-direction: column;
  padding: 0 0 6px;
}

/* stop row */
.gp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .1s;
}

.gp-row:hover {
  background: rgba(var(--accent-rgb), 0.05);
}

.gp-row.active {
  background: rgba(var(--accent-rgb), 0.10);
}

.uich-composer-host[data-theme="light"] .gp-row:hover,
.uich-composer-host[data-theme="light"] .gp-row:hover {
  background: rgba(var(--accent-rgb), 0.05);
}

.uich-composer-host[data-theme="light"] .gp-row.active,
.uich-composer-host[data-theme="light"] .gp-row.active {
  background: rgba(var(--accent-rgb), 0.08);
}

/* cells */
.gp-pos-cell {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 44px;
  flex-shrink: 0;
}

.gp-color-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}


/* column-header row, labels aligned to cells below */
.gp-stops-cols-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px;
  /* match gp-row side-padding so labels sit directly above their inputs */
}

.gp-col-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}

.gp-col-label-pos {
  width: 44px;
  flex-shrink: 0;
}

.gp-col-label-color {
  flex: 1;
  min-width: 0;
  padding-right: 10px;
}

/* number input */
.gp-num {
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  height: 24px;
  width: 36px;
  text-align: left;
  padding: 0 4px;
  outline: none;
  flex-shrink: 0;
  transition: border-color .12s, background .12s;
  -moz-appearance: textfield;
}

.gp-num::-webkit-outer-spin-button,
.gp-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.gp-num:hover {
  border-color: var(--panel-line-2);
}

.gp-num:focus {
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
  color: var(--text-hi);
}

/* color swatch */
.gp-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset;
}

.uich-composer-host[data-theme="light"] .gp-swatch,
.uich-composer-host[data-theme="light"] .gp-swatch {
  border-color: rgba(0, 0, 0, 0.1);
}

/* hex input */
.gp-hex {
  flex: 1;
  min-width: 0;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  color: var(--uich-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  height: 24px;
  padding: 0 5px;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: border-color .12s, background .12s;
}

.gp-hex:hover {
  border-color: var(--panel-line-2);
}

.gp-hex:focus {
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
  color: var(--text-hi);
}

/* remove button */
.gp-rm-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  color: var(--text-dim);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  transition: color .12s, background .12s;
  padding: 0;
}

.gp-rm-btn:hover:not(:disabled) {
  color: var(--uich-danger);
  background: rgba(255, 122, 122, 0.1);
}

.gp-rm-btn:disabled {
  opacity: 0.22;
  cursor: not-allowed;
}

.panel ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.panel ::-webkit-scrollbar-thumb {
  background: var(--panel-line-2);
  border-radius: 4px;
}

.panel ::-webkit-scrollbar-track {
  background: transparent;
}

/* ---- Background section mode tabs (Color / Gradient / Image) ---- */
.bg-mode-tabs {
  display: flex;
  align-items: center;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
}

.bg-mode-tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  border-radius: 4px;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  justify-content: center;
  transition: color .12s, background .12s;
}

.bg-mode-tab:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

.bg-mode-tab.on {
  background: var(--panel-bg-4);
  color: var(--text-hi);
}

/* "Add background color" placeholder row, shown when bgColor is cleared */
.bg-add-color-row {
  padding: 4px 10px 6px;
}

.bg-add-color-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px dashed var(--panel-line-2);
  cursor: pointer;
  background: none;
  border-radius: 6px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  height: 30px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: color .12s, border-color .12s, background .12s;
}

.bg-add-color-btn:hover {
  color: var(--text-hi);
  border-color: var(--panel-line-3, var(--panel-line-2));
  background: var(--panel-bg-3);
}

/* ===== Panel-only canvas mode ===== */
body[data-panel-only] {
  background: var(--panel-bg);
}

body[data-panel-only] .stage {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "panel";
  height: 100vh;
}

body[data-panel-only] .topbar,
body[data-panel-only] .sidebar,
body[data-panel-only] .canvas-wrap {
  display: none !important;
}

body[data-panel-only] .panel {
  height: 100vh !important;
  border-top: 0;
  box-shadow: none;
}

body[data-panel-only] .panel-resize {
  display: none;
}

/* --- Live code editor (wp.codeEditor / CodeMirror) integration --- */
.ed-pane-live {
  display: flex;
  flex-direction: column;
}

.ed-pane-body-live {
  flex: 1;
  min-height: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Empty state, shown centered over the (disabled) editor when no widget is
   selected. Lives in the body, not the header, so it never overlaps the
   Format/Copy tools in the narrow right dock. */
.ed-pane-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  color: var(--text-dim);
  pointer-events: none;
}

.ed-pane-body-live .uich-cm-textarea {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--uich-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  resize: none;
  outline: none;
  padding: 8px 10px;
  box-sizing: border-box;
}

.ed-pane-body-live .CodeMirror {
  height: 100% !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: transparent;
  border: 0;
}

.ed-pane-body-live .CodeMirror-gutters {
  background: var(--panel-bg-2, rgba(255, 255, 255, 0.04));
  border-left: 1px solid var(--panel-line, rgba(255, 255, 255, 0.08));
}

.ed-pane-body-live .CodeMirror {
  color: var(--uich-text);
}

.ed-pane-body-live .CodeMirror-gutter-wrapper,
.ed-pane-body-live .CodeMirror-linenumber {
  color: var(--text-mid);
  opacity: 0.8;
  padding: 0 6px 0 8px;
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .CodeMirror-gutters,
body[data-theme="light"] .ed-pane-body-live .CodeMirror-gutters,
.panel[data-theme="light"] .ed-pane-body-live .CodeMirror-gutters {
  background: var(--panel-bg-2) !important;
  border-left-color: var(--panel-line) !important;
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .CodeMirror,
body[data-theme="light"] .ed-pane-body-live .CodeMirror,
.panel[data-theme="light"] .ed-pane-body-live .CodeMirror {
  background-color: var(--panel-bg) !important;
  color: var(--uich-text) !important;
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .CodeMirror-linenumber,
body[data-theme="light"] .ed-pane-body-live .CodeMirror-linenumber,
.panel[data-theme="light"] .ed-pane-body-live .CodeMirror-linenumber {
  color: var(--text-mid) !important;
}

.ed-pane-body-live .CodeMirror-cursor {
  /* Set the full border shorthand, not just the color: Tailwind's scoped
     preflight (`.uich-tw *{ border-width:0 }`) zeroes the cursor's border-left
     width at equal specificity and wins on source order, leaving a 0px-wide –
     i.e. invisible, caret. Restating width + style here (higher specificity)
     restores the blinking cursor in the HTML/CSS/JS editors. */
  border-right: 1px solid var(--uich-text);
  border-left: none;
  width: 0;
}

.ed-pane-body-live .CodeMirror-selected,
.ed-pane-body-live .CodeMirror-focused .CodeMirror-selected {
  background: rgba(var(--accent-rgb), 0.28);
}

.ed-pane-body-live .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.03);
}

.ed-pane-body-live .CodeMirror-matchingbracket {
  color: var(--warn) !important;
  border-bottom: 1px solid var(--warn);
}

/* Reuse the design's syntax token palette so CodeMirror feels native
   in dark mode (overrides the default light-theme blue). */
.ed-pane-body-live .cm-s-default .cm-keyword,
.ed-pane-body-live .cm-s-default .cm-atom,
.ed-pane-body-live .cm-s-default .cm-builtin,
.ed-pane-body-live .cm-s-default .cm-def {
  color: hsl(var(--primary) / 0.35);
}

.ed-pane-body-live .cm-s-default .cm-tag,
.ed-pane-body-live .cm-s-default .cm-bracket {
  color: #ff9ec6;
}

.ed-pane-body-live .cm-s-default .cm-attribute,
.ed-pane-body-live .cm-s-default .cm-property,
.ed-pane-body-live .cm-s-default .cm-qualifier {
  color: var(--warn);
}

.ed-pane-body-live .cm-s-default .cm-string,
.ed-pane-body-live .cm-s-default .cm-string-2 {
  color: #9bdc9e;
}

.ed-pane-body-live .cm-s-default .cm-variable,
.ed-pane-body-live .cm-s-default .cm-variable-2,
.ed-pane-body-live .cm-s-default .cm-variable-3 {
  color: var(--uich-text);
}

.ed-pane-body-live .cm-s-default .cm-number {
  color: #ffd6a5;
}

.ed-pane-body-live .cm-s-default .cm-comment {
  color: #6a6c76;
  font-style: italic;
}

.ed-pane-body-live .cm-s-default .cm-operator,
.ed-pane-body-live .cm-s-default .cm-punctuation {
  color: #b8bac4;
}

.ed-pane-body-live .cm-s-default .cm-meta {
  color: #9ccfff;
}

.ed-pane-body-live .cm-s-default .cm-link {
  color: #9ccfff;
  text-decoration: underline;
}

/* Light theme: leave CodeMirror defaults alone, but tone down the
   blue-on-white that's too saturated for the panel chrome. */
.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-keyword,
.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-atom,
.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-builtin,
.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-def {
  color: hsl(var(--primary));
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-tag,
.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-bracket {
  color: #be185d;
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-attribute,
.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-property {
  color: var(--warn);
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-string,
.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-string-2 {
  color: #166534;
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-number {
  color: var(--warn);
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-comment {
  color: #6b7280;
  font-style: italic;
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-meta {
  color: #1d4ed8;
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-qualifier {
  color: var(--warn);
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-operator,
.uich-composer-host[data-theme="light"] .ed-pane-body-live .cm-s-default .cm-punctuation {
  color: #374151;
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .CodeMirror-activeline-background {
  background: rgba(var(--accent-rgb), 0.04);
}

.uich-composer-host[data-theme="light"] .ed-pane-body-live .CodeMirror-matchingbracket {
  color: var(--warn) !important;
  border-bottom-color: var(--warn);
}

.ed-empty-pill {
  margin-right: 6px;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 999px;
  border: 1px solid var(--panel-line);
  color: var(--text-dim);
}

.ed-pane-disabled .ed-pane-body-live {
  opacity: 0.55;
  pointer-events: none;
}

/* --- Editor tab additions --- */
.layers-empty {
  padding: 14px 12px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ── Empty layers state ─────────────────────────────────────────────────
   Centered hint + primary "Add Layer" CTA shown when the active widget
   has no HTML yet. Fills the entire layers-tree height so the message
   sits VERTICALLY CENTERED instead of stuck at the top. */
.layers-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 16px 16px 40px;
  /* `min-height: 100%` makes the state expand to fill its scroll parent
     (`.layers-tree { flex: 1 }`), so vertical centering actually has
     room to work even on tall panels. */
  min-height: 100%;
  box-sizing: border-box;
}

.layers-empty-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--panel-bg-3);
  display: grid;
  place-items: center;
  color: var(--text-mid);
  margin-bottom: 4px;
}

.layers-empty-msg {
  font-size: 13px;
  font-weight: 600;
  color: var(--uich-text);
}

.layers-empty-sub {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.45;
  max-width: 200px;
}

.layers-empty-cta {
  margin-top: 6px;
}

/* ── Add-layer dropdown ─────────────────────────────────────────────────
   The menu is portaled to <body> via React.createPortal so it floats above
   the layers-tree's scrolling container, never inflates its scrollHeight,
   never gets clipped by ancestor overflow. Positioning is computed in JS
   from the trigger's bounding rect (see computeAddMenuPos in composer-
   layers.jsx); these CSS rules just style the menu chrome. */
.layer-add {
  position: relative;
  display: inline-flex;
}

.layer-add-menu {
  /* `position`, `top`, `left`, AND `width` are set inline by the portal
     (computeAddMenuPos) so the menu can match the Layers column width
     exactly. The rules below give the menu its visuals; geometry comes
     from JS so resizing the panel keeps the menu in sync. */
  max-height: 280px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Custom-tag row, sits at the top of the list when the typed query
   looks like a valid tag the catalog doesn't carry. */
.layer-add-row-custom {
  background: rgba(var(--accent-rgb), 0.05);
  margin-bottom: 4px;
}

.layer-add-row-custom:hover {
  background: rgba(var(--accent-rgb), 0.10);
}

.layer-add-row-custom .layer-add-tag {
  color: var(--text-hi);
}

/* Compact "+" trigger used next to the Layers title. Borderless and
   transparent by default, it should feel like an unobtrusive affordance
   sitting next to the heading. Only the hover state adds a soft bg so
   the trigger reveals itself when the user reaches for it. */
.layer-add-trigger {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  cursor: pointer !important;
  width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--text-hi) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transition: background-color .12s, color .12s !important;
}

.layer-add-trigger:hover:not(:disabled) {
  color: var(--text-hi) !important;
  background: var(--panel-bg-3) !important;
}

.layer-add-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.layer-add-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--panel-line);
  background: var(--panel-bg);
  color: var(--text-dim);
}

.layer-add-search input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 11.5px;
  min-width: 0;
}

.layer-add-search input::-moz-placeholder {
  color: var(--text-dim);
}

.layer-add-search input::placeholder {
  color: var(--text-dim);
}

.layer-add-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px;
  min-height: 0;
  /* Hide the scrollbar track, keeps the menu visually clean while
     wheel/touch scrolling still works for long lists. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.layer-add-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.layer-add-group {
  padding: 6px 8px 2px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.layer-add-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--uich-text);
  text-align: right;
  min-width: 0;
}

.layer-add-row:hover,
.layer-add-row.active {
  background: rgba(128, 128, 128, 0.10);
}

.layer-add-icon {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--text-mid);
  flex-shrink: 0;
}

.layer-add-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.layer-add-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-hi);
  line-height: 1.2;
  flex-shrink: 0;
}

.layer-add-label {
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.layer-add-empty {
  padding: 14px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
}

.layers-foot-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lpreview {
  margin-right: 6px;
  font-size: 11px;
  color: var(--uich-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14ch;
}

.btn.on {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: hsl(var(--primary));
  color: var(--uich-text);
}

/* --- Layer drag indicators --- */
.layer-row {
  position: relative;
}

.layer-row.is-dragging {
  opacity: 0.45;
}

.layer-row.drop-before::before,
.layer-row.drop-after::after {
  content: "";
  position: absolute;
  right: 4px;
  left: 4px;
  height: 2px;
  background: hsl(var(--primary));
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}

.layer-row.drop-before::before {
  top: -1px;
}

.layer-row.drop-after::after {
  bottom: -1px;
}

.layer-row.drop-inside {
  background: rgba(var(--accent-rgb), 0.16);
  outline: 1px dashed rgba(var(--accent-rgb), 0.55);
  outline-offset: -2px;
}

/* --- Panel resize handle (top edge) --- */
.panel-resize {
  z-index: 5;
}

.panel-resize:hover::after,
.panel-resize:active::after {
  background: hsl(var(--primary));
  width: 60px;
  height: 4px;
}

/* --- Make the resize handle easier to find and grab --- */
.panel-resize {
  top: -6px;
  height: 12px;
}

.panel-resize::after {
  width: 48px;
  height: 4px;
  border-radius: 3px;
  background: var(--panel-line-2, #3b3d47);
  transition: background-color 120ms, width 120ms, height 120ms;
}

.panel-resize:hover::after {
  background: hsl(var(--primary));
  width: 80px;
  height: 5px;
}

.panel-resize:active::after {
  background: hsl(var(--primary));
  width: 96px;
  height: 5px;
}

/* --- Strong resize handle to ensure it's grabbable in the iframe --- */
.panel-resize {
  top: -8px;
  height: 16px;
  z-index: 2147483647;
  cursor: ns-resize;
  touch-action: none;
  pointer-events: auto;
}

.panel-resize::after {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  width: 80px;
  height: 5px;
  border-radius: 3px;
  background: var(--panel-line-2, #3b3d47);
  transition: background-color 120ms, width 120ms, height 120ms;
}

.panel-resize:hover::after {
  background: hsl(var(--primary));
  width: 110px;
  height: 6px;
}

.panel-resize:active::after {
  background: hsl(var(--primary));
  width: 130px;
  height: 6px;
}

.panel {
  overflow: visible !important;
}

/* --- Fill the outer floating-panel container so its height drives ours --- */
.uichemy-composer-floating-panel,
#uichemy-composer-floating-panel {
  display: flex;
  flex-direction: column;
}

.uichemy-composer-floating-panel .uich-composer-host,
#uichemy-composer-floating-panel .uich-composer-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.uich-composer-host>.panel {
  flex: 1;
  min-height: 0;
  height: auto !important;
}

/* --- Globals, single, uniform treatment --- */
/* When a property is overridden by an applied global (e.g. typography
   token), reuse the same input chrome but make it read-only and put the
   global's name inside it. No banner, no chip, no separate highlight. */
.input-global-applied {
  display: flex;
  align-items: center;
  height: var(--input-h, 26px);
  padding: 0 8px;
  background-color: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  color: var(--text-dim);
}

.input-global-applied input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-hi);
  font-family: inherit;
  font-size: 12px;
  width: 100%;
  cursor: default;
}

.input-global-applied input:focus {
  outline: none;
}

.gpicker-empty {
  padding: 14px 12px;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
}

/* --- Specialized element editors (img / svg) --- */
.element-editor {
  border-bottom: 1px dashed var(--panel-line);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.element-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.element-editor-row-full {
  padding-bottom: 2px;
}

.element-editor-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
  flex-shrink: 0;
  width: 50px;
}

.element-editor-hint {
  font-size: 11px;
  color: var(--text-dim);
}

.element-editor-hint code {
  background: var(--panel-bg-3);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10.5px;
}

.element-editor-input {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: var(--input-h, 26px);
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  padding: 0 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
}

/* Show the focus ring on the whole bordered control (like other inputs),
   instead of on the inner input, whose own ring is taller than this wrapper
   and pokes outside it. Matches shadcn's `ring-1 ring-ring`. */
.element-editor-input:focus-within {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

/* INPUT_CLS is a Tailwind recipe; its utilities compile under the `.uich-tw`
   prefix (e.g. `.uich-tw .border-input`, `.uich-tw .h-8`) which raises their
   specificity to (0,2,0). Match that here (prefix + descendant + element =
   0,2,1) so the inner input truly loses its own border/height/shadow and sits
   flush inside the wrapper, only the wrapper shows a border + focus ring. */
.uich-tw .element-editor-input input {
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  color: var(--uich-text);
  font-family: inherit;
  font-size: 12px;
}

/* Suppress the inner input's own focus ring. INPUT_CLS's `focus-visible:ring-1`
   compiles to `.uich-tw .…:focus-visible` (0,3,0); the `:focus-visible` here
   makes this (0,3,1) so it wins. */
.uich-tw .element-editor-input input:focus,
.uich-tw .element-editor-input input:focus-visible {
  box-shadow: none;
  outline: none;
}

/* Shared image / SVG media editor (legacy direct-media-grid parity) */
.element-editor-media-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 6px;
  align-self: flex-start;
}

.element-editor-media-tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
}

.element-editor-media-tab:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

.element-editor-media-tab.on {
  background: var(--panel-bg-4);
  color: var(--text-hi);
}

.element-editor-media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.element-editor-media-grid.has-code {
  grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
}

.element-editor-media-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.element-editor-field-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.element-editor-media-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 108px;
  border: 1px solid var(--panel-line);
  border-radius: 6px;
  background: var(--panel-bg-2);
  overflow: hidden;
}

.element-editor-media-preview:not(.is-empty) {
  cursor: pointer;
}

/* Full-area pick button shown when no image is set */
.element-editor-media-pick-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.element-editor-media-preview img {
  width: 100%;
  max-height: 120px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.element-editor-media-empty {
  font-size: 11px;
  color: var(--text-dim);
  padding: 12px;
  text-align: center;
}

.element-editor-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.element-editor-media-preview:hover .element-editor-media-overlay {
  opacity: 1;
  pointer-events: auto;
}

.element-editor-media-overlay-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 4px;
}

.element-editor-media-overlay-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.element-editor-media-overlay-btn.is-remove {
  font-weight: 400;
  font-size: 10.5px;
  opacity: 0.75;
}

.element-editor-media-overlay-btn.is-remove:hover {
  background: rgba(220, 50, 50, 0.35);
  opacity: 1;
}

.element-editor-media-code {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.element-editor-media-code-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.element-editor-link.is-embedded {
  border-bottom: 0;
  padding: 0;
  gap: 6px;
  background: transparent;
}

.element-editor-media.is-svg .element-editor-media-code {
  min-width: 0;
}

.element-editor-svg-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  padding: 8px 10px;
  color: var(--uich-text);
}

.element-editor-svg-input::-moz-placeholder {
  color: var(--text-dim);
  opacity: 0.08;
}

.element-editor-svg-input::placeholder {
  color: var(--text-dim);
  opacity: 0.08;
}

.element-editor-row .element-editor-input input[type="url"]::-moz-placeholder {
  color: var(--text-dim);
  opacity: 0.14;
}

.element-editor-row .element-editor-input input[type="url"]::placeholder {
  color: var(--text-dim);
  opacity: 0.14;
}

.element-editor-status {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

.element-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.element-editor-link-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-right: 0;
}

.element-editor-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-mid);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.element-editor-check input {
  margin: 0;
}

.element-editor-link input::-moz-placeholder {
  color: var(--text-dim);
  opacity: 0.14;
}

.element-editor-link input::placeholder {
  color: var(--text-dim);
  opacity: 0.14;
}

.element-editor-link-custom::-moz-placeholder {
  color: var(--text-dim);
  opacity: 0.08;
}

.element-editor-link-custom::placeholder {
  color: var(--text-dim);
  opacity: 0.08;
}

.element-editor-link-custom {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.45;
  resize: vertical;
  min-height: 56px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  padding: 8px 10px;
  color: var(--uich-text);
}

/* Custom 3px scrollbar width for all dropdowns and popover menus.
   Every scrolling pane in a float belongs here — a popover whose one tab
   scrolls with this bar and whose next tab scrolls with the browser default
   is the inconsistency this list exists to prevent. */
.combo-menu::-webkit-scrollbar,
.upill-list::-webkit-scrollbar,
.suggest::-webkit-scrollbar,
.layer-menu::-webkit-scrollbar,
.layers-tree::-webkit-scrollbar,
.layers-history-body::-webkit-scrollbar,
.tag-menu-list::-webkit-scrollbar,
.layer-add-list::-webkit-scrollbar,
.lib-list::-webkit-scrollbar,
.dep-add-body::-webkit-scrollbar,
.dep-add-custom::-webkit-scrollbar,
.dep-settings-body::-webkit-scrollbar,
.dep-list::-webkit-scrollbar,
.cpicker-globals-list::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.combo-menu::-webkit-scrollbar-thumb,
.upill-list::-webkit-scrollbar-thumb,
.suggest::-webkit-scrollbar-thumb,
.layer-menu::-webkit-scrollbar-thumb,
.layers-tree::-webkit-scrollbar-thumb,
.layers-history-body::-webkit-scrollbar-thumb,
.tag-menu-list::-webkit-scrollbar-thumb,
.layer-add-list::-webkit-scrollbar-thumb,
.lib-list::-webkit-scrollbar-thumb,
.dep-add-body::-webkit-scrollbar-thumb,
.dep-add-custom::-webkit-scrollbar-thumb,
.dep-settings-body::-webkit-scrollbar-thumb,
.dep-list::-webkit-scrollbar-thumb,
.cpicker-globals-list::-webkit-scrollbar-thumb {
  background: var(--panel-line-2);
  border-radius: 2px;
}

.combo-menu::-webkit-scrollbar-track,
.upill-list::-webkit-scrollbar-track,
.suggest::-webkit-scrollbar-track,
.layer-menu::-webkit-scrollbar-track,
.layers-tree::-webkit-scrollbar-track,
.layers-history-body::-webkit-scrollbar-track,
.tag-menu-list::-webkit-scrollbar-track,
.layer-add-list::-webkit-scrollbar-track,
.lib-list::-webkit-scrollbar-track,
.dep-add-body::-webkit-scrollbar-track,
.dep-add-custom::-webkit-scrollbar-track,
.dep-settings-body::-webkit-scrollbar-track,
.dep-list::-webkit-scrollbar-track,
.cpicker-globals-list::-webkit-scrollbar-track {
  background: transparent;
}

/* Layers column width resizer */
.layers-resize-handle {
  position: absolute;
  top: 0;
  left: -3px;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 100;
}

/* ── Floating "Navigator", detached Layers window ────────────────────────── */
.layers-float {
  display: flex;
  flex-direction: column;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.10);
  overflow: hidden;
}

/* The pane fills the floating window; its own chrome (border/bg) is dropped
   because the window frame provides it. */
.layers-float .layers-col {
  height: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
  border-radius: inherit;
}

/* Header doubles as the window's drag handle. */
.layers-float .layers-head.is-drag-handle {
  cursor: move;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-bottom: 1px solid var(--panel-line);
}

.layers-drag-grip {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  margin-left: 2px;
}

/* Bottom-right resize grip. */
.layers-float-resize {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nesw-resize;
  z-index: 101;
}

.layers-float-resize::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  border-left: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim);
  border-bottom-left-radius: 3px;
  opacity: 0.6;
}

/* ── Agent pairing panel (password handshake) ─────────────────────────────── */
.btn.xs {
  padding: 3px 9px;
  font-size: 10.5px;
  border-radius: var(--radius-sm);
}

.btn.xs:disabled {
  opacity: 0.45;
  cursor: default;
}

.agent-pairing {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Local network access gate ──────────────────────────────────────────────
   Rendered by the PRO chat bundle (LocalAccessGate in composer-chat.jsx) but
   styled here for the same reason every other chat class is: Pro ships no CSS,
   and Tailwind's JIT only scans this plugin's src, so a utility class written in
   Pro's source would never be generated. Semantic classes only.

   No border or panel of its own: this sits INSIDE .empty-card, and a second
   bordered box within it produced the nested-frame look that made the step hard
   to read. A hairline underneath separates it from the command block instead. */
.agent-access {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  text-align: center;
}

/* Capped and centred, not full-bleed. Uncapped, this mock browser prompt drew
   at the card's full width (~400px) and read as the real permission UI rather
   than a preview of it. Keep in step with the inline width LocalAccessArt sets
   on the <svg> itself — see the note there for why the art carries its own
   size rather than trusting this rule to be present. */
.agent-access-art {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

.agent-access-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-hi);
}

/* One short line. `text-wrap: balance` keeps a two-line wrap even rather than
   leaving one orphan word centred under a full line, which is most of what made
   the old three-line paragraph look misaligned. */
.agent-access-body {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
  text-wrap: balance;
}

/* ── Gate motion ────────────────────────────────────────────────────────────
   One 4s loop told from three parts that share a clock: signal leaves the globe,
   the cursor travels to Allow and presses it, the button flashes. The point is
   rehearsal — the real browser prompt shows up somewhere the user is not looking,
   so seeing the action first is what stops them reflexively clicking Block.
   SVG children need `transform-box: fill-box` or a CSS transform resolves
   against the whole viewBox and the pieces fly off. */
.agent-access-art .lna-ring,
.agent-access-art .lna-ripple,
.agent-access-art .lna-cursor,
.agent-access-art .lna-allow,
.agent-access-art .lna-dialog {
  transform-box: fill-box;
  transform-origin: center;
}

.agent-access-art .lna-dialog {
  animation: lna-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agent-access-art .lna-ring {
  animation: lna-ring 2.6s ease-out infinite;
}

.agent-access-art .lna-ring-2 {
  animation-delay: 0.9s;
}

.agent-access-art .lna-cursor {
  /* Scale is about the tip, not the middle, so the press reads as a press. */
  transform-origin: top right;
  animation: lna-cursor 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.agent-access-art .lna-allow {
  animation: lna-allow 4s linear infinite;
}

.agent-access-art .lna-ripple {
  animation: lna-ripple 4s ease-out infinite;
}

@keyframes lna-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes lna-ring {
  0%        { opacity: 0.5; transform: scale(0.6); }
  70%, 100% { opacity: 0;   transform: scale(1.75); }
}

@keyframes lna-cursor {
  0%, 8%    { opacity: 0; transform: translate(-44px, 20px); }
  20%       { opacity: 1; }
  45%       { opacity: 1; transform: translate(0, 0) scale(1); }
  52%       { transform: translate(0, 0) scale(0.86); }
  60%       { transform: translate(0, 0) scale(1); }
  86%       { opacity: 1; transform: translate(0, 0); }
  100%      { opacity: 0; transform: translate(-44px, 20px); }
}

@keyframes lna-allow {
  0%, 49%   { opacity: 1; }
  54%       { opacity: 0.5; }
  62%, 100% { opacity: 1; }
}

@keyframes lna-ripple {
  0%, 50%   { opacity: 0;    transform: scale(0.18); }
  56%       { opacity: 0.32; }
  78%, 100% { opacity: 0;    transform: scale(1); }
}

/* The card itself arrives rather than appearing. */
.agent-access {
  animation: lna-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Waiting step: the prompt is open somewhere they are not looking ──────── */
.agent-access-point {
  display: flex;
  justify-content: center;
  color: rgb(var(--accent-rgb));
  animation: lna-point 1.3s ease-in-out infinite;
}

@keyframes lna-point {
  0%, 100% { transform: translateY(2px);  opacity: 0.55; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

.agent-access-body strong {
  color: var(--text-hi);
  font-weight: 700;
}

@keyframes lna-halo {
  0%        { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.30); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
}

.agent-access-again {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.agent-access-again:hover {
  color: var(--text-hi);
}


/* ── Connect dialog ─────────────────────────────────────────────────────────
   Setup lives in a dialog now. Inline, the two setup routes, the permission
   explainer and the live status all fought over a ~300px column and no ordering
   of them read as a sequence. Here there is room to say it plainly: two numbered
   steps, the first offering a choice of route instead of showing both. */
.uconnect-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Frosted, not curtained. The dialog portals into the TOP editor document, so
     this covers the whole Elementor editor — left panel, top bar and the preview
     iframe alike (iframes paint into the parent, so backdrop-filter reaches
     them). A heavy flat scrim there just blacks the editor out; blurring it
     keeps the editor legible as context behind the step you are on, which is the
     point of an overlay rather than a screen. The light tint sits ON TOP of the
     blur so text underneath cannot compete with the dialog's own. */
  background: rgba(10, 11, 14, 0.42);
  backdrop-filter: blur(10px) saturate(0.85);
  -webkit-backdrop-filter: blur(10px) saturate(0.85);
  animation: uconnect-fade 0.2s ease-out both;
}

/* Fallback for engines without backdrop-filter (and for the Elementor editor
   under forced-colors): without the blur the scrim alone has to do the
   separating, so it gets darker rather than leaving the dialog floating on a
   barely-dimmed editor. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  .uconnect-overlay {
    background: rgba(10, 11, 14, 0.72);
  }
}

.uconnect {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 440px;
  max-height: min(88vh, 680px);
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 32px 80px rgba(0, 0, 0, 0.55);
  color: var(--text-hi);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  overflow: hidden;
  animation: uconnect-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.uconnect-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--panel-line);
}

.uconnect-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.uconnect-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-dim);
}

.uconnect-close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--panel-line-2);
  color: var(--text-mid);
  transition: color 0.12s, background 0.12s;
}

.uconnect-close:hover {
  background: var(--panel-bg-3);
  color: var(--text-hi);
}

/* The steps scroll; the header and the status footer stay put, so the live
   connection state is readable no matter how far down the user is. */
.uconnect-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px;
}

.uconnect-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.uconnect-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.uconnect-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--panel-bg-4);
  color: var(--text-hi);
  font-size: 10.5px;
  font-weight: 700;
}

.uconnect-step-title {
  font-size: 12.5px;
  font-weight: 700;
}

/* The AI-assistant route. Wrapped and selectable — this one is read before it is
   copied, unlike the command, so it is not allowed to clip. */
.uconnect-prompt {
  max-height: 132px;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line-2);
  color: var(--text-mid);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.6;
  white-space: pre-wrap;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.uconnect-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.uconnect-hint {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.uconnect-link {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.uconnect-link:hover {
  color: var(--text-hi);
}

.uconnect-copy {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line-2);
  color: var(--text-mid);
  font-size: 11px;
  font-weight: 600;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.uconnect-copy:hover {
  background: var(--panel-bg-4);
  color: var(--text-hi);
}

.uconnect-copy.ok {
  color: var(--ok);
  border-color: rgba(227, 237, 93, 0.4);
}

.uconnect-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--panel-line);
  background: var(--panel-bg);
}

.uconnect-foot-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Progress rail ─────────────────────────────────────────────────────────
   Three beads with the track drawn between them, so "where am I / how much is
   left" is answered before any of the step content is read. The steps are
   derived from real connection state, never from a counter we increment, so a
   bead can only be ticked by something that actually happened. */
.uconnect-rail {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-line);
  background: var(--panel-bg);
}

.uconnect-node {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  color: var(--text-dim);
}

.uconnect-node:disabled {
  cursor: default;
}

/* The connecting track: drawn by each node except the first, reaching back to
   the previous bead. Doing it with a pseudo-element rather than separate divider
   elements keeps the flex maths to one child per step. */
.uconnect-node + .uconnect-node::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  right: -50%;
  height: 1.5px;
  margin: 0 15px;
  background: var(--panel-line-2);
}

.uconnect-node.is-done::before,
.uconnect-node.is-on::before {
  background: rgba(var(--accent-rgb), 0.55);
}

.uconnect-bead {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--panel-bg-3);
  border: 1.5px solid var(--panel-line-2);
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.uconnect-node.is-on .uconnect-bead {
  background: rgb(var(--accent-rgb));
  border-color: rgb(var(--accent-rgb));
  color: var(--panel-bg);
}

.uconnect-node.is-done .uconnect-bead {
  background: transparent;
  border-color: rgba(var(--accent-rgb), 0.55);
  color: rgb(var(--accent-rgb));
}

.uconnect-node-label {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.uconnect-node.is-on .uconnect-node-label,
.uconnect-node.is-done .uconnect-node-label {
  color: var(--text-hi);
}

/* ── Step panes ── */
.uconnect-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: uconnect-step 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.uconnect-lead {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-mid);
}

/* Step 2 finishes without the user telling us, so it says so — otherwise a
   correctly-working screen looks like a screen that has stalled. */
.uconnect-listen {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: hsl(var(--primary));
  border: 0;
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--primary-foreground));
}

/* Spinner track has to be drawn against the banner's own fill, not the panel's —
   `--panel-line-2` is a dark hairline and vanished on the light banner. */
.uconnect-spin {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid hsl(var(--primary-foreground) / 0.25);
  border-top-color: hsl(var(--primary-foreground));
  animation: uconnect-spin 0.7s linear infinite;
}

.uconnect-done {
  align-items: center;
  text-align: center;
  padding: 8px 0 4px;
}

.uconnect-tick {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: hsl(var(--primary));
  border: 0;
  color: hsl(var(--primary-foreground));
  animation: uconnect-pop 0.34s cubic-bezier(0.22, 1.4, 0.4, 1) both;
}

/* Waiting for a prompt answer, with the escape hatch beside it once offered. */
.uconnect-wait {
  display: flex;
  align-items: center;
  gap: 12px;
}

@keyframes uconnect-step {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

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

@keyframes uconnect-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes uconnect-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes uconnect-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ── Inline launcher ────────────────────────────────────────────────────────
   All that is left in the panel: one way in. */
.agent-launch {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-mid);
}

/* The launcher's button IS the panel's shadcn Button with the same classes the
   "Open settings" CTA uses, so there is nothing to style here — matching by
   sharing the component rather than by re-describing it is what keeps the two
   from drifting apart again. */
.agent-launch.is-on {
  color: var(--text-mid);
}

.agent-launch.is-on .agent-access-dot {
  background: var(--ok);
  opacity: 1;
}

/* Motion is the teaching aid, not the content — the card reads identically
   without it, so honour the preference completely rather than partially. */
@media (prefers-reduced-motion: reduce) {

  .agent-access,
  .agent-access-point,
  .uconnect-spin,
  .uconnect,
  .uconnect-overlay,
  .agent-access-art .lna-dialog,
  .agent-access-art .lna-ring,
  .agent-access-art .lna-cursor,
  .agent-access-art .lna-allow,
  .agent-access-art .lna-ripple {
    animation: none;
  }

  .agent-access-art .lna-ring {
    opacity: 0;
  }
}

/* Post-consent: the card is gone and only the live state remains. */
.agent-access-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-dim);
}

.agent-access-status.is-on {
  color: var(--text-mid);
}

.agent-access-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  opacity: 0.5;
}

.agent-access-status.is-on .agent-access-dot {
  background: var(--ok);
  opacity: 1;
}

.agent-pairing-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agent-pairing-warn {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--warn);
  background: rgba(255, 209, 102, 0.08);
  border: 1px solid rgba(255, 209, 102, 0.28);
  border-radius: var(--radius);
  padding: 8px 10px;
}

.agent-pairing-warn svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.agent-pairing-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.agent-pairing-label svg {
  color: var(--text-mid);
}

/* Terminal-style command card */
.agent-cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line-2);
  border-radius: var(--radius);
  padding: 8px 11px 8px 8px;
}

.agent-cmd code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-hi);
  scrollbar-width: none;
}

.agent-cmd code::-webkit-scrollbar {
  display: none;
}

.agent-cmd-copy {
  flex: 0 0 auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--panel-bg-3);
  border: 1px solid var(--panel-line-2);
  color: var(--text-mid);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.agent-cmd-copy:hover {
  color: var(--text-hi);
  background: var(--panel-bg-4);
}

.agent-cmd-copy.ok {
  color: var(--ok);
  border-color: rgba(227, 237, 93, 0.4);
}

.agent-pairing-hint {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.agent-pairing-foot {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
  padding-top: 4px;
  margin-top: 2px;
  border-top: 1px solid var(--panel-line);
}

/* Multi-line AI prompt block */

.agent-prompt {
  position: relative;
}

.agent-prompt-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  max-height: 80px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line-2);
  border-radius: var(--radius);
  padding: 8px 10px 8px 38px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--uich-text);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.agent-prompt-text::-webkit-scrollbar {
  display: none;
}

/* Copy button pinned inside the prompt box (top-right) */
.agent-prompt-copy {
  position: absolute;
  top: 6px;
  left: 6px;
}

.agent-pairing-regen {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 11px;
  color: var(--text-dim);
}

.agent-pairing-regen:hover {
  color: var(--uich-text);
}

/* On a mismatch, the regenerate action becomes the primary call to action. */
.agent-pairing-regen.danger {
  align-self: stretch;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--text-hi);
  border-radius: var(--radius-sm);
  background: var(--text-hi);
  color: var(--panel-bg);
  font-weight: 600;
}

.agent-pairing-regen.danger:hover {
  color: var(--panel-bg);
  background: var(--uich-text);
  border-color: var(--uich-text);
}

/* ── Inline "Insert dynamic value" button (DynamicConnector) ───────────────── */
.element-editor-dyn-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--input-h, 26px);
  height: var(--input-h, 26px);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--text-mid);
  cursor: pointer;
  line-height: 1;
  transition: color .12s;
}

.element-editor-dyn-btn:hover {
  color: var(--text-hi);
}

.element-editor-dyn-btn.is-bound {
  color: hsl(var(--primary));
}

/* In the TEXT row the button is absolutely positioned in the textarea's corner
   (see .text-row-area-dyn), so it needs a tighter box than the 26px header-line
   version — at 26px it crowded the corner and overhung the field's radius. */
.text-row .element-editor-dyn-btn {
  align-self: center;
  margin-top: 0;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

/* ── Global Classes: Code tab (dark CodeMirror) + color swatch ─────────────── */
.pr-class-code .CodeMirror {
  height: 220px !important;
  background: #1e1e2e !important;
  color: #e8eaed !important;
  border: 1px solid rgba(128, 128, 128, .28);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.65;
}

.pr-class-code .CodeMirror-gutters {
  background: #23232f !important;
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.pr-class-code .CodeMirror-linenumber {
  color: #6b6b80;
}

.pr-class-code .CodeMirror-cursor {
  border-right: 1px solid #e8eaed;
}

.pr-class-code .CodeMirror-selected {
  background: rgba(124, 172, 248, .25) !important;
}

.pr-class-code .cm-property {
  color: #7cacf8;
}

.pr-class-code .cm-keyword,
.pr-class-code .cm-atom,
.pr-class-code .cm-variable-2,
.pr-class-code .cm-builtin {
  color: #c58af9;
}

.pr-class-code .cm-number {
  color: #6ad08a;
}

.pr-class-code .cm-string,
.pr-class-code .cm-string-2 {
  color: #f29766;
}

.pr-class-code .cm-qualifier,
.pr-class-code .cm-tag,
.pr-class-code .cm-def,
.pr-class-code .cm-variable {
  color: #e8eaed;
}

.pr-class-code .cm-comment {
  color: #7a7a90;
  font-style: italic;
}

.pr-class-code .cm-operator,
.pr-class-code .cm-meta {
  color: #9aa0a6;
}

/* Fallback textarea (when wp.codeEditor is unavailable) */
.pr-class-code .uich-cm-textarea {
  width: 100%;
  min-height: 160px;
  box-sizing: border-box;
  background: #1e1e2e;
  color: #e8eaed;
  border: 1px solid rgba(128, 128, 128, .28);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.65;
  padding: 8px 10px;
  resize: vertical;
  outline: none;
}

/* Color swatch, fill the whole box with the actual color (no native chrome) */
.pr-color-dot {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
}

.pr-color-dot::-webkit-color-swatch-wrapper {
  padding: 0;
}

.pr-color-dot::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}

.pr-color-dot::-moz-color-swatch {
  border: none;
  border-radius: 2px;
}

/* ── Globals value picker (globe on each property field) ─────────────────── */
.pr-gpick {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pr-gpick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(128, 128, 128, .30);
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim, #9aa2b1);
  cursor: pointer;
}

.pr-gpick-btn:hover,
.pr-gpick.is-open .pr-gpick-btn {
  color: var(--text-hi);
  border-color: rgba(var(--accent-rgb), .55);
}

.pr-gpick-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  z-index: 2147483646;
  min-width: 220px;
  max-width: 300px;
  max-height: 320px;
  overflow-y: auto;
  background: #1e1e2e;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}

.pr-gpick-group+.pr-gpick-group {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 6px;
}

.pr-gpick-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
  padding: 3px 6px;
}

.pr-gpick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #e8e8f0;
  border-radius: 6px;
  padding: 6px 7px;
  cursor: pointer;
  text-align: right;
}

.pr-gpick-item:hover {
  background: rgba(var(--accent-rgb), .16);
}

.pr-gpick-swatch {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .2);
}

.pr-gpick-swatch-txt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: var(--text-hi);
  background: rgba(var(--accent-rgb), .12);
}

.pr-gpick-item-name {
  flex: 1 1 auto;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-gpick-item-val {
  flex: 0 0 auto;
  font-size: 10.5px;
  opacity: .5;
  font-family: ui-monospace, Menlo, monospace;
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Globe picker sits inside the input row, on the right of the field's input. */
.prop-input-stack .pf-input-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.prop-input-stack .pf-input-main {
  flex: 1 1 auto;
  min-width: 0;
}

.prop-input-stack .pf-input-row>.pr-gpick {
  flex: 0 0 auto;
}

/* ── CSS-editor "/" globals picker (grouped + collapsible) ──────────────── */
.pr-cm-globals {
  position: absolute;
  z-index: 2147483647;
  width: 280px;
  max-width: 90vw;
  background: #1e1e2e;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
  padding: 6px;
  box-sizing: border-box;
}

.pr-cm-globals-search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #e8e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  outline: none;
}

.pr-cm-globals-search:focus {
  border-color: rgba(var(--accent-rgb), .55);
}

.pr-cm-globals-list {
  max-height: 300px;
  overflow-y: auto;
}

.pr-cm-globals-group {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  text-align: right;
  border: 0;
  background: transparent;
  color: #cbd0dd;
  cursor: pointer;
  padding: 6px 6px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pr-cm-globals-group:hover {
  background: rgba(255, 255, 255, .05);
}

.pr-cm-caret {
  width: 10px;
  opacity: .7;
}

.pr-cm-gname {
  flex: 1 1 auto;
}

.pr-cm-count {
  opacity: .5;
  font-weight: 600;
}

.pr-cm-globals-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: right;
  border: 0;
  background: transparent;
  color: #e8e8f0;
  cursor: pointer;
  padding: 6px 22px 6px 8px;
  border-radius: 6px;
}

.pr-cm-globals-item:hover {
  background: rgba(var(--accent-rgb), .16);
}

.pr-cm-sw {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .2);
}

.pr-cm-sw-txt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: var(--text-hi);
  background: rgba(var(--accent-rgb), .12);
}

.pr-cm-name {
  flex: 1 1 auto;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-cm-var {
  flex: 0 0 auto;
  font-size: 10.5px;
  opacity: .5;
  font-family: ui-monospace, Menlo, monospace;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-cm-globals-empty {
  padding: 10px;
  text-align: center;
  opacity: .5;
  font-size: 12px;
}

/* Inspector globe picker, collapsible groups + filter (matches the "/" picker) */
.pr-gpick-search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #e8e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  outline: none;
}

.pr-gpick-search:focus {
  border-color: rgba(var(--accent-rgb), .55);
}

.pr-gpick-list {
  max-height: 300px;
  overflow-y: auto;
}

.pr-gpick-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  text-align: right;
  border: 0;
  background: transparent;
  color: #cbd0dd;
  cursor: pointer;
  padding: 6px 6px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pr-gpick-group-head:hover {
  background: rgba(255, 255, 255, .05);
}

.pr-gpick-caret {
  width: 10px;
  opacity: .7;
}

.pr-gpick-gname {
  flex: 1 1 auto;
}

.pr-gpick-gcount {
  opacity: .5;
  font-weight: 600;
}

.pr-gpick .pr-gpick-item {
  padding-right: 22px;
}

/* ── Globals panel, matched to the editor's tabs / inputs / accents ───────── */
.pr-glob-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

.pr-glob-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
  color: var(--text-mid);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.pr-glob-tab:hover {
  color: var(--text-hi);
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
}

.pr-glob-tab.on {
  color: var(--text-hi);
  font-weight: 700;
  background: var(--accent-bg);
  border-color: hsl(var(--primary));
}

.pr-glob-tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-glob-tab-n {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(128, 128, 128, .22);
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}

.pr-glob-tab.on .pr-glob-tab-n {
  background: hsl(var(--primary));
  color: #fff;
}

.pr-glob-addtab {
  border-style: dashed;
  color: var(--text-mid);
  font-weight: 600;
}

.pr-glob-addtab:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  background: var(--accent-bg);
}

.pr-glob-status {
  font-size: 11px;
  color: var(--text-mid);
  white-space: nowrap;
}

.pr-glob-empty {
  padding: 26px 0;
  color: var(--text-mid);
  text-align: center;
}

.pr-glob-row {
  transition: background-color .12s ease;
}

.pr-glob-row:hover {
  background: var(--panel-bg-2);
}

.pr-glob-additem:hover {
  border-color: hsl(var(--primary));
  color: var(--text-hi);
  background: var(--accent-bg);
}

.pr-glob-ic:hover {
  color: var(--text-hi);
  border-color: var(--panel-line-2);
  background: var(--panel-bg-3);
}

.pr-glob-danger {
  border-color: rgba(220, 80, 80, .5) !important;
  color: rgba(224, 96, 96, .98) !important;
}

.pr-glob-danger:hover {
  background: rgba(220, 80, 80, .14) !important;
  border-color: rgba(220, 80, 80, .75) !important;
}

/* ── Annotate (Draw) overlay ──────────────────────────────────────────────── */
.annotate-root {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  pointer-events: none;
}

.annotate-svg {
  position: fixed;
  pointer-events: auto;
  cursor: crosshair;
  touch-action: none;
  z-index: 2147483601;
}

.annotate-bar {
  position: fixed;
  /* Centre over the CANVAS, not the viewport. A docked-open panel reserves
     `--uich-dock-w`, so a plain `left: 50%` put the bar half the panel's width
     right of where the drawing actually is. Same correction the canvas toolbar
     pill already makes (see .canvas-toolbar-wrap); falls back to 0 when the
     panel is closed, and eases with the drawer so the two stay in step. */
  right: calc(50% - var(--uich-dock-w, 0px) / 2);
  bottom: 24px;
  transform: translateX(50%);
  transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2147483602;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  color: hsl(var(--popover-foreground));
}

.annotate-note {
  width: 300px;
  max-width: 40vw;
  height: 34px;
  padding: 0 12px;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.annotate-note::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}

.annotate-note::placeholder {
  color: hsl(var(--muted-foreground));
}

.annotate-note:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / .25);
}

.annotate-ic {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.annotate-ic svg {
  flex: none;
}

.annotate-ic:hover:not(:disabled) {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}

.annotate-ic:disabled {
  opacity: .4;
  cursor: default;
}

.annotate-cancel {
  height: 32px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius);
}

.annotate-cancel:hover:not(:disabled) {
  color: hsl(var(--foreground));
}

/* `.uich-tw` prefix is load-bearing: Tailwind preflight resets
   `.uich-tw button { background: transparent }` (0,1,1) which outranks a plain
   `.annotate-send` (0,1,0), the fill must be re-asserted under the host scope
   or the button loses its primary background in the (non-hover) normal state. */
.uich-tw .annotate-send,
.annotate-send {
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  transition: background-color .15s ease;
}

.annotate-send svg {
  flex: none;
  width: 12px;
  height: 12px;
}

.annotate-send:hover:not(:disabled) {
  background: hsl(var(--primary) / .9);
}

.annotate-send:disabled {
  pointer-events: none;
  opacity: .5;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════
   shadcn token bridge (redesign, 2026-07)
   Every legacy design token now resolves to the shadcn/ui theme variables
   defined in shadcn.css, so the whole panel renders in the shadcn palette
   while components are migrated file-by-file. Light/dark flips via the
   `dark` class on the host, the [data-theme] blocks above are superseded
   (these selectors are ≥ specificity and later in source order).
   Delete this block once the legacy classes are fully removed.
   ═══════════════════════════════════════════════════════════════════════ */
.uich-tw,
.uich-composer-host.uich-tw,
.uich-tw .panel[data-theme] {
  /* Pro-upsell surfaces follow the host skin's accent — near-black in a light
     skin, near-white in a dark one, the builder's own colour where a builder
     skin is active. Declared HERE, not at :root: a custom property substitutes
     at its declaration scope, and --primary only exists from .uich-tw down, so
     the :root copies resolve to nothing (they carry neutral fallbacks). */
  --uich-pro-grad: hsl(var(--primary));
  --uich-pro-tint: hsl(var(--primary) / 0.10);
  --uich-brand: hsl(var(--primary));
  --bg-canvas: hsl(var(--background));
  --bg-canvas-ink: hsl(var(--foreground));
  --panel-bg: hsl(var(--background));
  /* NOTE: -2 and -3 deliberately equal --panel-bg. They read as "raised"
     surfaces by name, but the composer's surfaces are flat here and dozens of
     elements paint themselves with them, so giving them a real grey (--muted /
     --accent) washes the whole panel — chat, side panel, composer, pills — in
     grey. Tried that; it was wrong.
     -3 previously held `hsl(hsl(var(--primary)))`, a doubled hsl() that is
     invalid CSS and therefore resolved to nothing; this keeps the same
     appearance with valid syntax.
     Anything that must stand out against the panel (input borders and fills)
     uses explicit neutrals in composer-dock.css rather than these tokens. */
  --panel-bg-2: hsl(var(--background));
  --panel-bg-3: hsl(var(--background));
  --panel-bg-4: hsl(var(--secondary));
  --panel-line: hsl(var(--border));
  --panel-line-2: hsl(var(--input));
  --text-hi: hsl(var(--foreground));
  --uich-text: hsl(var(--foreground));
  --text-mid: hsl(var(--muted-foreground));
  --text-dim: hsl(var(--muted-foreground));
  --accent-2: hsl(var(--primary));
  --accent-bg: hsl(var(--primary) / 0.1);
  --brand-green: hsl(var(--primary));
  --uich-danger: hsl(var(--destructive));
  --ok: hsl(142.1 70.6% 45.3%);
  --warn: hsl(38 92% 50%);
  --radius-sm: calc(var(--radius) - 4px);
}

/* ============================================================================
   Gutenberg skin, native-WP polish pass (audit fixes).
   Legacy composer.css rules load after the Tailwind utilities and win at equal
   specificity, so several controls kept non-WP radii / fonts / shadows / accents
   under this skin. These attribute-scoped overrides reset them to the block
   editor's look: 2px radius, #949494 (--input) outlines, #3858e9 (--primary)
   focus, subtle popover shadows, and the system font. Gated to gutenberg, so
   Elementor/Bricks are untouched; shadcn tokens keep light + dark correct.
   ============================================================================ */

/* 1, prompt input: WP text-field frame + accent focus ring (most prominent control) */
[data-uich-composer-skin="gutenberg"] .composer-input {
  border-radius: 2px;
  border-color: hsl(var(--input));
}
[data-uich-composer-skin="gutenberg"] .composer-input:focus-within {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

/* 2, context chips (Pick / Draw / selected element): square + system font */
[data-uich-composer-skin="gutenberg"] .ctx-chip {
  border-radius: 2px;
  border-color: hsl(var(--input));
  font-family: inherit;
}

/* 3, model & scenario menus: subtle WP popover shadow + 4px radius */
[data-uich-composer-skin="gutenberg"] .model-menu,
[data-uich-composer-skin="gutenberg"] .scenario-menu {
  border-radius: 4px;
  border-color: hsl(var(--border));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.10);
}
/* 3b, keep the model menu inside the panel.
   It's `position: absolute` against `.model-dd`, i.e. against the small "Gpt 5.5"
   BUTTON, so a fixed 240/260px width always hangs off one side or the other
   depending on where that button happens to sit, and the sidebar then clips the
   overhang. (An earlier attempt capped it with `max-width: 84vw`, but `vw` is the
   browser WINDOW, not the sidebar, so on any normal screen that cap never
   applied.)
   Fix: drop the button out of the positioning chain so the menu measures against
   `.chat-composer`, the prompt box, which by definition spans the panel, and
   pin it to both edges. The menu then always fits, at any panel width, and opens
   just above the prompt box. */
[data-uich-composer-skin="gutenberg"] .model-dd {
  position: static;
}
[data-uich-composer-skin="gutenberg"] .model-menu {
  right: 12px;
  left: 12px;
  width: auto;
  max-width: none;
  bottom: calc(100% + 6px);
}

/* 4, model selector button: native SelectControl frame */
[data-uich-composer-skin="gutenberg"] .model-btn {
  border-radius: 2px;
  border-color: hsl(var(--input));
}

/* 5, scenario button */
[data-uich-composer-skin="gutenberg"] .scenario-btn {
  border-radius: 2px;
}

/* 6, connect-screen LOCAL / CLOUD badges: square + admin palette (no sky-blue/lime) */
[data-uich-composer-skin="gutenberg"] .empty-card-badge {
  border-radius: 2px;
}
[data-uich-composer-skin="gutenberg"] .empty-card-badge.local {
  color: hsl(var(--status-form));
  background: hsl(var(--status-form) / 0.12);
  border-color: hsl(var(--status-form) / 0.4);
}
[data-uich-composer-skin="gutenberg"] .empty-card-badge.cloud {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.12);
  border-color: hsl(var(--primary) / 0.4);
}

/* 7, empty-state logo mark: WP square-ish tile, not a 12px rounded card */
[data-uich-composer-skin="gutenberg"] .empty-mark {
  border-radius: 3px;
}

/* 8, assistant model tag: square + system font */
[data-uich-composer-skin="gutenberg"] .msg2-model {
  border-radius: 2px;
  font-family: inherit;
}

/* 9, drop JetBrains Mono from chat chrome (WP uses the system sans everywhere) */
[data-uich-composer-skin="gutenberg"] .composer-token-meter,
[data-uich-composer-skin="gutenberg"] .suggest-row {
  font-family: inherit;
}

/* 10, off-palette accents in deps / library UI → admin palette */
[data-uich-composer-skin="gutenberg"] .dep-kind.style {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.14);
  border-color: hsl(var(--primary) / 0.3);
}
[data-uich-composer-skin="gutenberg"] .lib-added {
  border-radius: 2px;
  color: hsl(var(--status-form));
  background: hsl(var(--status-form) / 0.14);
  border-color: hsl(var(--status-form) / 0.3);
}
[data-uich-composer-skin="gutenberg"] .status-ok .dot {
  box-shadow: 0 0 0 3px hsl(var(--status-form) / 0.18);
}

/* 4, model selector button: native SelectControl frame */
[data-uich-composer-skin="gutenberg"] .model-btn {
  border-radius: 2px;
  border-color: hsl(var(--input));
}

/* 5, scenario button */
[data-uich-composer-skin="gutenberg"] .scenario-btn {
  border-radius: 2px;
}

/* 6, connect-screen LOCAL / CLOUD badges: square + admin palette (no sky-blue/lime) */
[data-uich-composer-skin="gutenberg"] .empty-card-badge {
  border-radius: 2px;
}
[data-uich-composer-skin="gutenberg"] .empty-card-badge.local {
  color: hsl(var(--status-form));
  background: hsl(var(--status-form) / 0.12);
  border-color: hsl(var(--status-form) / 0.4);
}
[data-uich-composer-skin="gutenberg"] .empty-card-badge.cloud {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.12);
  border-color: hsl(var(--primary) / 0.4);
}

/* 7, empty-state logo mark: WP square-ish tile, not a 12px rounded card */
[data-uich-composer-skin="gutenberg"] .empty-mark {
  border-radius: 3px;
}

/* 8, assistant model tag: square + system font */
[data-uich-composer-skin="gutenberg"] .msg2-model {
  border-radius: 2px;
  font-family: inherit;
}

/* 9, drop JetBrains Mono from chat chrome (WP uses the system sans everywhere) */
[data-uich-composer-skin="gutenberg"] .composer-token-meter,
[data-uich-composer-skin="gutenberg"] .suggest-row {
  font-family: inherit;
}

/* 10, off-palette accents in deps / library UI → admin palette */
[data-uich-composer-skin="gutenberg"] .dep-kind.style {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.14);
  border-color: hsl(var(--primary) / 0.3);
}
[data-uich-composer-skin="gutenberg"] .lib-added {
  border-radius: 2px;
  color: hsl(var(--status-form));
  background: hsl(var(--status-form) / 0.14);
  border-color: hsl(var(--status-form) / 0.3);
}
[data-uich-composer-skin="gutenberg"] .status-ok .dot {
  box-shadow: 0 0 0 3px hsl(var(--status-form) / 0.18);
}
/* ── Pro gating (badge / lock card / upsell modal) ─────────────────────────
   Shared look for every Free→Pro surface. See composer-pro.jsx. The AI gradient
   (indigo→purple→pink) marks anything Pro so it reads consistently. */
.pro-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1;
  padding: 2px 6px;
  margin-right: 6px;
  border-radius: 999px;
  color: hsl(var(--primary-foreground));
  background: var(--uich-pro-grad);
  text-transform: uppercase;
  vertical-align: middle;
}
.pro-badge--sm { font-size: 8px; padding: 1px 5px; margin-right: 5px; }

/* Card that replaces a locked feature body (e.g. CSS/JS editor in Free). */
.pro-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-height: 160px;
  padding: 28px 24px;
  border: 1px dashed var(--panel-bg-4);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--uich-pro-tint), transparent 60%),
    var(--panel-bg-2);
  color: var(--text-mid);
}
.pro-lock__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: hsl(var(--primary-foreground));
  background: var(--uich-pro-grad);
}
.pro-lock__title {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-hi);
}
.pro-lock__msg {
  margin: 0;
  max-width: 280px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-mid);
}
/* Rich upsell: header (icon/title/subtitle) stays centred; the benefit list is a
   left-aligned, grouped block — the Grok / Character AI paywall structure. */
.pro-lock--rich { gap: 6px; padding: 26px 22px 22px; }
.pro-lock__sub {
  margin: 0 0 4px;
  max-width: 300px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-mid);
}
.pro-lock__feats {
  list-style: none;
  width: 100%;
  box-sizing: border-box;
  /* !important: this is a <ul>, and the composer renders inside the host theme,
     whose `ul { padding / margin }` (and WP core / Tailwind preflight resets)
     otherwise flatten the box's inner spacing. Same defensive intent as the
     theme button-paint guard. */
  margin: 4px 0 2px !important;
  padding: 16px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: right;
  border: 1px solid var(--panel-line-2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}
.pro-lock__feats > .pro-lock__feat { margin: 0 !important; }
.pro-lock__feat { display: flex; align-items: flex-start; gap: 10px; }
.pro-lock__feat-ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius);
  color: hsl(var(--primary));
  background: var(--uich-pro-tint);
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.22);
}
/* The glyph is drawn with stroke/fill: currentColor, so pin BOTH to the brand
   colour, defending against any host-theme `svg` paint reaching the panel. */
.pro-lock__feat-ic svg { color: hsl(var(--primary)); stroke: currentColor; }
.pro-lock__feat-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pro-lock__feat-t { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--text-hi); }
.pro-lock__feat-d { font-size: 11.5px; line-height: 1.45; color: var(--text-mid); }
.pro-lock--rich .pro-lock__cta { width: 100%; justify-content: center; margin-top: 10px; }
.pro-lock__cta,
.pro-modal__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 7px 16px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 700;
  /* !important: this is an <a>, and the composer renders inside the host theme,
     whose `a { color }` / `a:hover` rules otherwise repaint the label a muted
     link colour (looked washed-out on the orange fill). Same defensive intent as
     the theme button-paint guard below. */
  color: hsl(var(--primary-foreground)) !important;
  text-decoration: none !important;
  background: var(--uich-pro-grad);
  transition: filter .15s ease, transform .15s ease;
}
.pro-lock__cta:hover,
.pro-lock__cta:focus,
.pro-modal__cta:hover,
.pro-modal__cta:focus { color: hsl(var(--primary-foreground)) !important; text-decoration: none !important; filter: brightness(1.08); transform: translateY(-1px); }

/* Global upsell modal (fired when a Free limit is hit). */
.pro-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.pro-modal {
  position: relative;
  width: min(360px, calc(100vw - 40px));
  padding: 26px 26px 24px;
  text-align: center;
  border: 1px solid var(--panel-bg-4);
  border-radius: 12px;
  background: var(--panel-bg-2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.pro-modal__x {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
}
.pro-modal__x:hover { background: var(--panel-bg-3); color: var(--text-hi); }
.pro-modal__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 2px auto 12px;
  border-radius: 999px;
  color: hsl(var(--primary-foreground));
  background: var(--uich-pro-grad);
}
.pro-modal__title { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--text-hi); }
.pro-modal__msg { margin: 0 0 18px; font-size: 12.5px; line-height: 1.55; color: var(--text-mid); }

/* ── Theme button-paint guard ────────────────────────────────────────────────
   The composer renders inside the previewed PAGE, the live page on the front
   end, the preview iframe in the editor, so the active theme's CSS reaches it.
   Themes routinely paint EVERY button, e.g.

     [type=button]:focus, [type=button]:hover, button:focus, button:hover {
       background-color: #c36; color: #fff; text-decoration: none;
     }

   which turned the panel's tabs and icon buttons the site's accent colour on
   hover and focus.

   Neutralised only for buttons that do not declare their own background (or
   text colour). That `:not([class*="bg-"])` guard is deliberate: it excludes
   exactly the buttons the composer styles itself, so `hover:bg-accent` and
   friends keep working instead of being flattened along with the theme's rule.
   Specificity lands at (0,3,0), above the theme's (0,1,1), and these rules are
   unlayered so they also outrank Tailwind's layered utilities, which is why the
   guard rather than the weight has to do the excluding. */
.uich-tw :where(button, [type="button"], [type="submit"], [type="reset"]):not([class*="bg-"]):is(:hover, :focus, :focus-visible) {
  background-color: transparent;
  background-image: none;
  text-decoration: none;
}
.uich-tw :where(button, [type="button"], [type="submit"], [type="reset"]):not([class*="text-"]):is(:hover, :focus, :focus-visible) {
  color: inherit;
}
/* Inputs are deliberately NOT reset the same way. Their focus treatment is a
   box-shadow ring the composer draws itself (focus:ring-*, and the canvas
   toolbar's purple ring); an unlayered `box-shadow: none` here ties on
   specificity and, being unlayered, wins, so it would erase the composer's own
   focus indicator, not the theme's. If a theme is ever found painting inputs,
   guard it the way the button rules above do rather than blanket-resetting. */

/* ══════════════════════════════════════════════════════════════════════════
   MINIMAL SKIN — editor panel (Framer-inspired · cosmetic layer)      [ui-ux]
   ---------------------------------------------------------------------------
   Chrome/typography only. NO colour-token VALUES change — every colour below
   references an existing token (--panel-bg-*, --panel-line*, --ring, --text-*).
   Applies to EVERY editor dock/surface (right dock, bottom sheet, Gutenberg /
   Bricks inspector) by targeting the composer's own field classes (.prop-cell,
   .prop-input-stack, .simple-content-section) instead of a single dock. Chrome
   only — borderless soft-fill pills, 8px radius, one comfortable height, sans
   values, sentence-case labels. Label-left stays native to the right dock.
   Delete this block to revert.
   ────────────────────────────────────────────────────────────────────────── */

/* 1 · Borderless soft-fill inputs. The --panel-bg-2 fill already exists; we
       only drop the RESTING 1px border and show a ring on focus instead. */
.prop-cell .input,
.prop-cell .select,
.prop-cell .textarea,
.prop-cell .linput,
.prop-input-stack .input,
.prop-input-stack .select,
.prop-input-stack .textarea,
.prop-input-stack .linput {
  border-color: transparent;
}

.prop-cell .input:hover,
.prop-cell .select:hover,
.prop-cell .linput:hover,
.prop-input-stack .input:hover,
.prop-input-stack .select:hover,
.prop-input-stack .linput:hover {
  border-color: transparent;
  background-color: var(--panel-bg-3);
}

.prop-cell .input:focus,
.prop-cell .select:focus,
.prop-cell .textarea:focus,
.prop-cell .linput:focus-within,
.prop-input-stack .input:focus,
.prop-input-stack .select:focus,
.prop-input-stack .textarea:focus,
.prop-input-stack .linput:focus-within {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 1px hsl(var(--ring));
  background-color: var(--panel-bg-2);
}

/* 2 · Numeric values in the UI sans, not JetBrains Mono (mono stays in the
       code view, where it belongs). */
.prop-cell .linput input,
.prop-input-stack .linput input {
  font-family: inherit;
  font-size: 12px;
}

/* 3 · Subsection titles: sentence-case sans, not UPPERCASE mono. */
.subsec-title,
.subsection-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* 4 · Segment track borderless, to match the borderless inputs. The active
       chip (.seg button.on) is unchanged — nothing removed, nothing added. */
.prop-cell .seg,
.prop-input-stack .seg {
  border-color: transparent;
}

/* NOTE: the "Add property" ghost + is a Tailwind-classed button, restyled in
   composer-fields.jsx / composer-inspector.jsx (ADD_TRIGGER_CLS). */

/* 5 · Content section (the prose TEXT field). The textarea is a Tailwind-classed
       control (TEXTAREA_CLS, shared with the mono code editors, so scoped here
       rather than at the constant). Match the borderless soft-fill inputs, and
       drop the uppercase on its micro-label ("Text", set sentence-case in JSX). */
.simple-content-section textarea {
  border-color: transparent;
  background-color: var(--panel-bg-2);
  box-shadow: none;
}

.simple-content-section textarea:hover {
  background-color: var(--panel-bg-3);
}

.simple-content-section textarea:focus,
.simple-content-section textarea:focus-visible {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 1px hsl(var(--ring));
  background-color: var(--panel-bg-2);
  outline: none;
}

.simple-content-section .text-row-head span {
  text-transform: none;
  letter-spacing: normal;
}

/* 6 · Framer input feel: softer 8px pills, one comfortable height, a touch more
       padding, crisper value text, and a soft focus halo. Controls only. */
.prop-cell .input,
.prop-cell .select,
.prop-cell .linput,
.prop-cell .seg,
.prop-input-stack .input,
.prop-input-stack .select,
.prop-input-stack .linput,
.prop-input-stack .seg,
.simple-content-section textarea {
  border-radius: 8px;
}

/* one comfortable height, matching the dock's 36px .linput */
.prop-cell .input,
.prop-cell .select,
.prop-cell .linput,
.prop-input-stack .input,
.prop-input-stack .select,
.prop-input-stack .linput {
  height: 36px;
}

/* a touch more horizontal padding for the pill feel */
.prop-cell .input,
.prop-cell .select,
.prop-input-stack .input,
.prop-input-stack .select {
  padding-right: 11px;
  padding-left: 11px;
}

/* crisper value text (still UI sans, not mono) */
.prop-cell .linput input,
.prop-input-stack .linput input {
  font-weight: 500;
  color: var(--text-hi);
}

/* soft Framer-style focus halo instead of a hard 1px ring */
.prop-cell .input:focus,
.prop-cell .select:focus,
.prop-cell .textarea:focus,
.prop-cell .linput:focus-within,
.prop-input-stack .input:focus,
.prop-input-stack .select:focus,
.prop-input-stack .textarea:focus,
.prop-input-stack .linput:focus-within,
.simple-content-section textarea:focus,
.simple-content-section textarea:focus-visible {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
  background-color: var(--panel-bg-2);
  outline: none;
}

/* 7 · Shadcn-framed controls. The Layout/Typography/etc. dropdowns render as a
       custom combobox (SelectCustomInput) and the mono/attribute boxes use
       Tailwind `border border-input bg-transparent shadow-sm` — NOT the composer
       .input/.select classes — so parts 1–6 never reached them. Bring that shared
       frame to the same borderless 8px soft-fill pill. */
.prop-cell .border-input,
.prop-input-stack .border-input {
  border-color: transparent;
  background-color: var(--panel-bg-2);
  box-shadow: none;
  border-radius: 8px;
  min-height: 36px;
}

.prop-cell .border-input:hover,
.prop-input-stack .border-input:hover {
  background-color: var(--panel-bg-3);
}

.prop-cell .border-input:focus-within,
.prop-input-stack .border-input:focus-within {
  background-color: var(--panel-bg-2);
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
}

/* 8 · Segmented icon/label toggles (seg-align: text-align etc.) render as a
       Tailwind `bg-muted p-0.5` button group — a third control family, distinct
       from .input/.select and .border-input. `:has(button)` keeps this to real
       toggles (not bare bg-muted chips). Match the Framer pill: 8px soft-fill
       track, comfortable height, raised lighter active chip (--panel-bg-4, like
       the composer's own .seg active). */
.field.pf .bg-muted:has(button) {
  border-radius: 8px;
  background-color: var(--panel-bg-2);
  min-height: 36px;
  padding: 3px;
}

.field.pf .bg-muted:has(button) button {
  height: 30px;
  border-radius: 6px;
}

.field.pf .bg-muted:has(button) button.bg-background {
  background-color: var(--panel-bg-4);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

/* 9 · NO resting stroke — specificity fix. The frame border compiles as a
       Tailwind utility `.uich-tw .border-input` (0,2,0), which TIED parts 1/7
       above so the stroke survived on source order. Re-assert borderless at
       (0,3,x) with the `.uich-tw` prefix, and cover .swatch-input (the colour
       field) which the earlier parts missed. Border/ring shows on FOCUS only. */
.uich-tw .prop-cell .linput,
.uich-tw .prop-cell .select,
.uich-tw .prop-cell .input,
.uich-tw .prop-cell .textarea,
.uich-tw .prop-cell .border-input,
.uich-tw .prop-cell .swatch-input,
.uich-tw .prop-input-stack .linput,
.uich-tw .prop-input-stack .select,
.uich-tw .prop-input-stack .input,
.uich-tw .prop-input-stack .textarea,
.uich-tw .prop-input-stack .border-input,
.uich-tw .prop-input-stack .swatch-input {
  border-color: transparent;
  box-shadow: none;
}

.uich-tw .prop-cell .linput:focus-within,
.uich-tw .prop-cell .select:focus,
.uich-tw .prop-cell .input:focus,
.uich-tw .prop-cell .textarea:focus,
.uich-tw .prop-cell .border-input:focus-within,
.uich-tw .prop-cell .swatch-input:focus-within,
.uich-tw .prop-input-stack .linput:focus-within,
.uich-tw .prop-input-stack .select:focus,
.uich-tw .prop-input-stack .input:focus,
.uich-tw .prop-input-stack .textarea:focus,
.uich-tw .prop-input-stack .border-input:focus-within,
.uich-tw .prop-input-stack .swatch-input:focus-within {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
}
/* ───────────────────────── end MINIMAL SKIN ─────────────────────────────── */

/* Length-input −/+ steppers. Hidden by default so the bottom dock and the
   Gutenberg inspector keep their current field width; the right dock opts in
   (see composer-dock.css), where the Framer-style layout has room for them. */
.lin-step {
  display: none;
}

/* Outside the right dock the stepper stays hidden, so the length field keeps
   its previous width; the row wrapper must not change that layout. */
.lin-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.lin-row > * {
  min-width: 0;
}

/* ---- Sliding tab underline (TabsList variant="line") ----------------------
   One shared bar drawn by the list, positioned from the custom properties the
   TabsList layout effect publishes for the active trigger. Animating transform
   + width makes it travel between tabs; a per-trigger pseudo-element could only
   cross-fade, which reads as two bars blinking. Sits at bottom:-1px so it lands
   ON the rule below it rather than stacking a second line above it. */
.uich-tabs-line::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: 0;
  height: 2px;
  width: var(--tab-bar-w, 0px);
  transform: translateX(var(--tab-bar-x, 0px));
  opacity: var(--tab-bar-o, 0);
  border-radius: 999px;
  background: hsl(var(--foreground));
  pointer-events: none;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .uich-tabs-line::after { transition: none; }
}

/* ---- AI turns: inline mark instead of an avatar column --------------------
   The avatar used to own a 24px flex column beside the reply, so a tall answer
   left that whole gutter empty down its full height — wasted width in a panel
   that only has ~420px. The mark becomes a small badge sitting inline with the
   "Composer" name, and the reply text takes the full width.
   Done here rather than in the Pro markup: the chat's CSS lives in this repo,
   and absolute-positioning the existing node avoids touching composer-chat.jsx. */
.msg2.ai,
.msg2.ai-process {
  position: relative;
  display: block;
}

.msg2.ai > .msg2-av,
.msg2.ai-process > .msg2-av {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  /* Bare glyph, no chip: at 16px the tinted box and its ring read as a button
     sitting next to the name rather than a speaker mark. */
  background: none;
  box-shadow: none;
  border-radius: 0;
  color: var(--text-mid);
}

.msg2.ai > .msg2-av svg,
.msg2.ai-process > .msg2-av svg {
  width: 13px;
  height: 13px;
}

/* Clear the badge, and keep the name row tall enough to sit beside it. */
.msg2.ai > .msg2-body > .msg2-meta,
.msg2.ai-process > .msg2-body > .msg2-meta {
  padding-right: 22px;
  min-height: 16px;
}

/* The ai-process turn leads with the "Working…" head, not a .msg2-meta name row,
   so it needs the same 22px clearance or the title sits under the badge. */
.msg2.ai-process > .msg2-body > .process-head {
  padding-right: 22px;
  min-height: 16px;
}

/* Follow-up suggestion chips sit against the right edge, under the reply they
   belong to. The old `margin-left: 36px` indented them past the avatar column
   that no longer exists, which left them floating in the middle of the panel. */
.chat-followups {
  justify-content: flex-end;
  align-items: flex-end;
  margin-right: 0;
}

/* ---- Sliding segmented pill (.seg-slide) ---------------------------------
   One chip drawn by the wrapper, positioned from the custom properties
   useSlidingSeg publishes for the active item, so the chip travels between
   items instead of one vanishing as the next appears. Items sit above it.
   Sized from the active item, so a control whose items differ in width (the
   Code scope tabs: one labelled item, the rest icon-only) animates its width
   as well as its position. */
.seg-slide {
  position: relative;
}

.seg-slide > * {
  position: relative;
  z-index: 1;
}

.seg-slide::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
  width: var(--seg-w, 0px);
  height: var(--seg-h, 0px);
  transform: translate(var(--seg-x, 0px), 50%);
  opacity: var(--seg-o, 0);
  /* The segmented colour system's own tokens, not hsl(var(--background)) and a
     hand-rolled shadow. Every track, chip and hover wash in the panel is drawn
     from --seg-*, and this pill IS the chip now, so it has to come from the same
     place or it drifts from them the moment a skin changes one. --seg-radius-inner
     is also the concentric-radius value the segments themselves use, so the pill
     and the item it sits under share a corner. */
  border-radius: var(--seg-radius-inner, calc(var(--radius) - 2px));
  background: var(--seg-thumb, hsl(var(--background)));
  box-shadow: inset 0 0 0 1px var(--seg-thumb-line, transparent),
              var(--seg-thumb-shadow, 0 1px 2px rgba(0, 0, 0, 0.18));
  pointer-events: none;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .seg-slide::before { transition: none; }
}

/* ---- Chat history: overlay drawer, above the conversation -----------------
   .chat2-wrap is a `220px 1fr` grid, so opening the history left the chat
   ~200px in a 420px panel. Its bubbles overflow that column and — being later
   in the DOM — paint straight over the sidebar, so the history appeared to sit
   BEHIND the conversation.

   The drawer now floats over the chat instead of splitting the row: the
   conversation keeps its full width, and an opened drawer sits on top where it
   belongs. Only rendered while open (composer-chat.jsx renders it behind
   `sideOpen &&`), so there is nothing to hide when closed. */
.chat2-wrap {
  position: relative;
}

.chat2-wrap.side-open {
  grid-template-columns: 1fr;
}

.chat2-wrap.side-open > .chat-side {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 6;
  width: 240px;
  max-width: 84%;
  overflow-y: auto;
  /* Must be opaque: --panel-bg-2 resolves to --panel-bg, so a token-only
     surface let the conversation show through. Panel colour plus a grey scrim
     lifts the drawer in both skins. */
  background-color: var(--panel-bg);
  background-image: linear-gradient(rgba(128, 128, 128, 0.07), rgba(128, 128, 128, 0.07));
  box-shadow: -8px 0 24px -10px rgba(0, 0, 0, 0.55);
}

/* ── Canvas inline text toolbar (.ctb) ───────────────────────────────────────
   Floating light pill that appears above a text/heading element being edited on
   the canvas. It overlays the user's page (not the dark panel), so it carries its
   own light surface + neutral tokens rather than the panel skin's. The AI action
   is the one accent; character formatting uses a neutral pressed state so the bar
   stays calm. Built as a visual component first — see composer-text-toolbar.jsx. */
.ctb-root {
  position: absolute;
  z-index: 40;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ctb {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: #ffffff;
  border: 0.5px solid rgba(15, 15, 21, 0.10);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 15, 21, 0.14), 0 1px 2px rgba(15, 15, 21, 0.06);
}

.ctb-slot {
  position: relative;
  display: inline-flex;
}

.ctb-btn {
  height: 32px;
  min-width: 32px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #1a1b20;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.ctb-btn:hover,
.ctb-btn.is-open {
  background: #f1f1f4;
}

/* Neutral pressed state for character formatting (Bold/Italic/…). */
.ctb-btn.on {
  background: #e9e9ee;
  color: #0f0f15;
}

.ctb-caret {
  color: #9a9ca6;
}

/* The one accent: Ask AI. */
.ctb-btn.ctb-ai {
  color: #d8541f;
  background: rgba(232, 97, 60, 0.10);
}

.ctb-btn.ctb-ai:hover,
.ctb-btn.ctb-ai.is-open {
  background: rgba(232, 97, 60, 0.16);
}

.ctb-grip {
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  color: #b7b8c0;
  cursor: grab;
}

.ctb-grip:active {
  cursor: grabbing;
}

.ctb-block {
  font-size: 13px;
  font-weight: 500;
  padding: 0 8px;
  white-space: nowrap;
}

.ctb-block svg {
  color: #9a9ca6;
}

.ctb-div {
  width: 0.5px;
  align-self: stretch;
  background: rgba(15, 15, 21, 0.10);
  margin: 3px 4px;
}

.ctb-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 2.5px rgba(15, 15, 21, 0.18);
}

/* Text-label button (the "Aa" letter-case control). */
.ctb-btn-text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ── Menus ──────────────────────────────────────────────────────────────── */
.ctb-menu {
  position: absolute;
  top: calc(100% + 7px);
  background: #ffffff;
  border: 0.5px solid rgba(15, 15, 21, 0.10);
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 12px 32px rgba(15, 15, 21, 0.16), 0 1px 2px rgba(15, 15, 21, 0.06);
}

.ctb-mlabel {
  font-size: 11px;
  color: #9a9ca6;
  padding: 6px 9px 4px;
}

.ctb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  color: #1a1b20;
  font-family: inherit;
  font-size: 13px;
  text-align: right;
  cursor: pointer;
  white-space: nowrap;
}

.ctb-item:hover {
  background: #f4f4f6;
}

.ctb-item.on {
  color: #0f0f15;
  font-weight: 500;
}

.ctb-item-ico {
  display: inline-flex;
  width: 18px;
  justify-content: center;
  flex: 0 0 auto;
  color: #6a6c76;
}

.ctb-item-ai {
  color: #d8541f;
}

.ctb-item-chev {
  margin-right: auto;
  color: #b7b8c0;
}

.ctb-item.on .ctb-item-chev {
  color: #d8541f;
}

.ctb-item-kbd {
  margin-right: auto;
  font-size: 11px;
  color: #b7b8c0;
  font-family: 'JetBrains Mono', monospace;
}

.ctb-sep {
  height: 0.5px;
  background: rgba(15, 15, 21, 0.10);
  margin: 5px 6px;
}

/* Embedded mode: the toolbar is injected into the editor's own selection toolbar
   (which supplies the pill, grip and Ask AI), so drop our own pill chrome and let
   the controls sit bare in that shell. */
.ctb.ctb-embedded {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.ctb-oncanvas {
  display: inline-flex;
  align-items: center;
}

/* ── Add-library floating panel ───────────────────────────────────────────────
   Not a modal. It was a centred dialog with a dimming scrim, which for a
   six-field form read as far too much ceremony — and it covered the canvas it
   is meant to sit beside. It is a small panel anchored just LEFT of the dock
   instead, bottom-aligned to its trigger so it grows upward over empty canvas.

   Still portalled out of the panel: the original problem was that
   `.dep-add-popover` was position:absolute with max-width:100%, so in the narrow
   dock it shrank to the footer's width. Out here it keeps its own size.

   Every value is a shared token — same palette, radius and face as the panel,
   the dock and the on-canvas toolbar. */
.dep-add-float {
  position: fixed;
  z-index: 2147483200;
  box-sizing: border-box;
  width: 320px;
  max-width: calc(100vw - 24px);
  /* Anchored below the trigger by computePickerPosition (flipping above only when
     below overflows); scrolls internally past this cap. */
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line-2);
  border-radius: var(--radius, 6px);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  color: var(--uich-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.dep-add-float-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px 8px 8px;
  border-bottom: 1px solid var(--panel-line);
}
.dep-add-float-head strong { font-size: 12.5px; font-weight: 650; color: var(--text-hi); }
.dep-add-float-x {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
}
.dep-add-float-x:hover { background: var(--panel-bg-3); color: var(--text-hi); }
/* Everything below the header scrolls as one, so the header and the panel edge
   stay put while a long catalog moves. */
.dep-add-float > *:not(.dep-add-float-head) { flex: 0 0 auto; }
/* The content region fills the remaining fixed height and scrolls — the catalog
   `.lib-list` and the Custom form `.dep-add-custom` are the tab bodies rendered
   directly under the head + tab bar, so either one becomes the scroll area. */
.dep-add-float > .dep-add-body,
.dep-add-float > .lib-list,
.dep-add-float > .dep-add-custom { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* One column at 320px — the two-column grid belonged to the wide dialog. */
.dep-add-float .dep-add-custom { display: flex; flex-direction: column; gap: 8px; }

/* ── The chat never scrolls sideways ──────────────────────────────────────────
   Content that does not fit wraps onto the next line instead.

   The trigger was tool names in the process list — `mcp__playwright__browser_
   take_screenshot` is ONE unbreakable token, far wider than a 330px dock, so it
   pushed a horizontal scrollbar across the whole transcript.

   `overflow-wrap: anywhere` and not `break-word`: break-word refuses to split a
   long word when that word is the only thing on its line, which is precisely
   this case. `anywhere` also lets the container shrink below the word's width,
   which is what stops the scrollbar appearing at all. */
.chat2-body .process-steps,
.chat2-body .process-step,
.chat2-body .msg2-text,
.chat2-body .msg2 { min-width: 0; }

.process-step-name,
.process-title,
.msg2-text,
.msg2-text p,
.msg2-text li,
.msg2-text code,
.msg2-text a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Code blocks wrap as well. In a dock this narrow, a scrolling <pre> means
   dragging a 3px bar to read one line — wrapped code is taller but readable. */
.msg2-text pre {
  overflow-x: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Attached image thumbnails move to the next row rather than off the side. */
.composer-images {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* Backstop: whatever else lands in the transcript, it cannot introduce a
   sideways scrollbar. The transcript already sets overflow-x: hidden on itself;
   this stops a CHILD from growing one of its own. */
.chat2-body > *,
.chat2-body .process-steps { overflow-x: clip; }


/* ── Right-dock mode ─────────────────────────────────────────────────────────
   The composer can dock to the RIGHT side of the preview as a vertical panel
   (Elementor-panel-like) instead of the default bottom sheet. The outer shell
   `#uichemy-composer-floating-panel` gets `.uich-dock-right` (from React), the
   inner <section> gets `.panel.dock-right`. Everything vertical-specific lives
   in this file so the bottom-dock design stays untouched. */

/* ---- Outer shell: right sidebar instead of bottom sheet ---- */
#uichemy-composer-floating-panel.uich-dock-right,
.uichemy-composer-floating-panel.uich-dock-right {
  top: 47px;
  bottom: 0;
  right: auto;
  left: 0;
  /* Default 332px, drag-resizable between DOCK_MIN (280) and DOCK_MAX (720)
     in composer-app.jsx. `width` here is just the initial value — the resize
     handle drives it afterwards via an inline style on this element, which
     wins over this rule. min/max-width must stay in step with the JS
     constants or the handle will visibly stop working before its intended
     limit. */
  width: 332px;
  min-width: 280px;
  max-width: 720px;
  height: auto !important;
  /* beats legacy 430px + any stale inline height */
  min-height: 0;
  max-height: none !important;
  border-right: 1px solid var(--panel-line, #2a2c33);
  /* Flat canvas-facing (left) edge: the right dock reads as a flush sidebar
     (just the left border), so no corner rounding. */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transform: translateX(-105%);
  /* Slide the drawer in/out smoothly. Only `transform` transitions, the
     width-drag resize changes `width` (not transform) so it stays lag-free, and
     this eases in lockstep with the front-end page-push (body margin-right). */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {

  #uichemy-composer-floating-panel.uich-dock-right,
  .uichemy-composer-floating-panel.uich-dock-right {
    transition-duration: 0.01ms;
  }
}

/* Front end (live preview): the WordPress admin bar is fixed over the top of
   the viewport, so a top:0 drawer gets its titlebar clipped underneath it.
   Start the drawer below the admin bar. Scoped to body.admin-bar so it never
   affects the Elementor editor (which has no admin bar). */
body.admin-bar #uichemy-composer-floating-panel.uich-dock-right,
body.admin-bar .uichemy-composer-floating-panel.uich-dock-right {
  top: 32px;
}

@media screen and (max-width: 782px) {

  body.admin-bar #uichemy-composer-floating-panel.uich-dock-right,
  body.admin-bar .uichemy-composer-floating-panel.uich-dock-right {
    top: 46px;
  }
}

#uichemy-composer-floating-panel.uich-dock-right.active,
.uichemy-composer-floating-panel.uich-dock-right.active {
  transform: translateX(0);
}

#uichemy-composer-floating-panel.uich-dock-right.minimized,
.uichemy-composer-floating-panel.uich-dock-right.minimized {
  transform: translateX(calc(-1*(100% - 50px)));
}

/* Let the edge toggle stick out of the drawer. */
#uichemy-composer-floating-panel.uich-dock-right,
.uichemy-composer-floating-panel.uich-dock-right {
  overflow: visible !important;
}

/* Collapsed = drawer slides fully off-screen (Elementor-style); only the
   edge toggle (left: -22px) stays visible to reopen it. */
#uichemy-composer-floating-panel.uich-dock-right.active.uich-dock-slid,
.uichemy-composer-floating-panel.uich-dock-right.active.uich-dock-slid {
  transform: translateX(-100%);
}

/* Elementor's OWN editor dropdowns/popovers (e.g. the Publish "save options"
   menu beside the Publish button) open at the top-right, right where the docked
   composer panel (z-index:9999) sits, so the panel covers them and they look
   like they never open. Lift Elementor's menu containers above the panel.
   Scoped to Elementor's edit mode and to Elementor's own menu classes only, so
   it never affects composer UI (which uses .uich-tw, not these). */
body.elementor-editor-active .elementor-panel-saver-menu,
body.elementor-editor-active #elementor-panel-saver-menu,
body.elementor-editor-active .elementor-panel-footer-sub-menu-wrapper,
body.elementor-editor-active .MuiPopover-root,
body.elementor-editor-active .MuiMenu-root,
body.elementor-editor-active .MuiModal-root {
  z-index: 100050 !important;
}

/* Inner panel: match the shell's flush (square) left edge. */
.panel.dock-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  /* The bottom-sheet dock's upward drop-shadow (base `.panel` rule) has a wide
     44px blur that bleeds leftward onto the canvas when the panel is docked
     right. The right dock reads as a flat sidebar (just the left border), so
     drop the shadow here. Bottom-dock keeps its shadow. */
  box-shadow: none;
}

/* Light theme re-adds a panel drop-shadow through a higher-specificity host
   rule (`.uich-composer-host[data-theme="light"] .panel`, 0-3-0) that beats the
   `.panel.dock-right` (0-2-0) removal above, so the shadow reappears and bleeds
   onto the canvas in right-dock mode. Override it with matching specificity. */
.uich-composer-host[data-theme="light"] .panel.dock-right,
[data-uich-composer-theme="light"] .panel.dock-right,
.panel.dock-right[data-theme="light"] {
  box-shadow: none;
}

/* ---- Elementor-style edge toggle on the drawer's left edge ---- */
.panel.dock-right .dock-edge-toggle {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 50px;
  padding: 0;
  border: 1px solid var(--panel-line);
  border-left: 0;
  border-radius: 0;
  background: var(--panel-bg-2);
  color: var(--text-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 7;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.panel.dock-right .dock-edge-toggle:hover {
  color: var(--text-mid);
  background: var(--panel-bg-2);
}

.panel.dock-right .dock-edge-toggle .chev {
  display: inline-flex;
  transform: rotate(90deg);
  /* chevron points right = "close towards the edge" */
  transition: transform 0.2s ease;
}

.panel.dock-right .dock-edge-toggle.closed .chev {
  transform: rotate(-90deg);
  /* points left = "pull the drawer back open" */
}

/* ---- Resize handle: left edge, width drag (vertical grip pill) ---- */
.panel.dock-right .panel-resize {
  top: 0;
  bottom: 0;
  right: -8px;
  left: auto;
  width: 16px;
  height: auto;
  cursor: ew-resize;
}

.panel.dock-right .panel-resize::after,
.panel.dock-right .panel-resize:hover::after {
  width: 4px !important;
  height: 48px !important;
}

/* ---- Header: structured two-row layout for the narrow panel.
   Row 1 (title bar): logo · EDITOR/CODE/CHAT · collapse/close pinned right.
   Row 2 (toolbar):   Simple|Developer left · dock + theme right. ---- */
.panel.dock-right .panel-tabs {
  flex-wrap: wrap;
  padding-left: 0;
}

.panel.dock-right .panel-tab {
  padding: 8px 6px;
  font-size: 12px;
  letter-spacing: 0;
  min-width: 0;
  flex: 1 1 0;
  white-space: nowrap;
  gap: 4px;
}

/* The AI badge costs precious width in the narrow title row. */
.panel.dock-right .panel-tab .badge {
  display: none;
}

/* The narrow title row doesn't need the brand logo. */
.panel.dock-right .panel-brand {
  display: none;
}

/* ---- Full tab bar: Editor/Chat/Code tabs + Layers/skin/Developer tools all
   share ONE row (no separate "Edit" title bar). Tabs flex to fill; the tools
   pin to the right edge and stay on the same line. ---- */
.panel.dock-right .tab-tools {
  display: flex;
  align-items: center;
  /* Fill the whole top bar so the Design/Developer switcher can stretch across
     it (the Editor/Chat/Code tabs live in their own row below). */
  flex: 1;
  margin-right: 0;
  padding-right: 12px;
  padding-left: 8px;
}

/* The navigator icon + switcher wrapper spans the full width; the layers icon
   keeps its size and the switcher grows to fill the rest. */
.panel.dock-right .tab-tools>div:first-child {
  flex: 1;
  display: flex;
  align-items: center;
}

/* The mode switch is LINE tabs now, so it must not stretch. These two rules
   used to read "Design / Developer split the filled width evenly" and gave the
   list flex:1 with flex:1 on each button — correct for a filled segmented pill,
   wrong here: it would stretch each underline across half the row instead of
   letting it hug its label. Sized by content, left-aligned. */
.panel.dock-right .tab-tools .mode-switch {
  flex: 0 0 auto;
}

.panel.dock-right .tab-tools .mode-switch [role='tab'] {
  flex: 0 0 auto;
}

/* Elementor-style stacked tabs, icon above, label below, equal width. */
.panel.dock-right .panel-tabs {
  flex-wrap: nowrap;
  min-height: 58px;
  background: var(--panel-bg-2);
}

/* Top bar (Designer/Developer + History): equal padding on all four sides. The
   58px min-height above is meant for the stacked tab STRIP, on this row it just
   inflated the vertical space (content centered, not evenly padded), and
   .tab-tools carried an asymmetric 12/8 left/right. Pin uniform padding on the
   bar itself and let tab-tools sit flush. Scoped :not(.panel-tabs-strip) so the
   tab row below keeps its 58px. */
.panel.dock-right .panel-tabs:not(.panel-tabs-strip) {
  min-height: 0;
  padding: 12px;
}
.panel.dock-right .panel-tabs:not(.panel-tabs-strip) .tab-tools {
  padding: 0;
}
.panel.dock-right .panel-tab {
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 400;
  flex: 1 1 0;
  justify-content: center;
}

/* Theme toggle pinned to the panel's bottom-right corner. */
.panel.dock-right .dock-theme-fab {
  position: absolute;
  left: 6px;
  bottom: 3px;
  z-index: 8;
  width: 24px;
  height: 22px;
}

/* Skin (Brand / Elementor) toggle sits just left of the theme toggle. */
.panel.dock-right .dock-skin-fab {
  position: absolute;
  left: 34px;
  bottom: 3px;
  z-index: 8;
  width: 24px;
  height: 22px;
}

/* ---- Inspector: accordions (rendered by JSX) ---- */
.panel.dock-right .acc-list {
  display: flex;
  flex-direction: column;
}

/* Section headers stay quiet (no filled header bar — the name is plain text and
   the +/− carries the state), but every section is separated by a hairline so
   the list reads as distinct rows rather than floating labels. No rule after the
   last one, which would leave a stray line above the empty space below. */
.panel.dock-right .acc {
  border-bottom: 1px solid var(--panel-line);
}
.panel.dock-right .acc:last-child {
  border-bottom: 0;
}

.panel.dock-right .acc-head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  /* Reference design keeps EVERY section name at full contrast, open or closed
     — dimming the closed ones made the list read as mostly-disabled. */
  color: var(--text-hi);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  text-align: right;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.panel.dock-right .acc-head:hover {
  color: var(--text-hi);
  background: transparent;
}

.panel.dock-right .acc.open>.acc-head {
  color: var(--text-hi);
  background: transparent;
}

.panel.dock-right .acc-ico {
  display: inline-flex;
  align-items: center;
}

.panel.dock-right .acc-label {
  /* Natural width so the caption can sit directly after it; the caret is pushed
     to the far right by its own auto margin instead. */
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel.dock-right .acc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--primary));
  flex: 0 0 auto;
}

.panel.dock-right .acc-caret {
  display: inline-flex;
  margin-right: auto;
  transition: transform 0.18s ease;
  opacity: 0.6;
}

.panel.dock-right .acc.open .acc-caret {
  transform: rotate(-180deg);
}

.panel.dock-right .acc-body {
  background: var(--panel-bg);
}

/* Per-section caption sitting inline after the label in the accordion head
   ("text · image · link"), so each row says what's inside without opening it.
   Hidden on the open row, where the controls themselves make it redundant. */
.panel.dock-right .acc-meta-inline {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-dim);
}
.panel.dock-right .acc.open .acc-meta-inline {
  display: none;
}

/* The dynamic-construct (Loop / Form …) accordion has its own markup but must look
   IDENTICAL to the native section accordions (Layout / Spacing / …) in the right
   dock. Mirror the `.acc` / `.acc-head` chrome above EXACTLY, keep these values in
   sync with it. Switching to the section's border-BOTTOM model also removes the old
   double-border with the last section, so the previous top-border hack is gone. */
.panel.dock-right .construct-accordion {
  border-top: 0;
  border-bottom: 1px solid var(--panel-line);
  background: transparent;
}

.panel.dock-right .construct-accordion-head {
  gap: 9px;
  padding: 13px 16px;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--text-mid);
}

.panel.dock-right .construct-accordion-head:hover,
.panel.dock-right .construct-accordion.is-open>.construct-accordion-head {
  color: var(--text-hi);
  background: var(--panel-bg-2);
}

.panel.dock-right .construct-accordion-chevron {
  color: inherit;
  opacity: 0.6;
}

.panel.dock-right .construct-accordion-body {
  border-top: 0;
  background: var(--panel-bg);
  padding-bottom: 0;
}

/* ---- Fields go one-by-one: every prop spans the full 12-col row.
       (!important beats the inline gridColumn span set per-field.) ---- */
.panel.dock-right .prop-row>* {
  grid-column: 1 / -1 !important;
}

/* ---- Webflow-style rows: label on the LEFT, control on the RIGHT.
       The label cell is col 1; every other child (input stack, hints,
       applied-from notes) stacks in col 2. ---- */
.panel.dock-right .field.pf {
  display: grid;
  /* Label column measured off the reference design (Figma, panel ≈260px wide,
     label column ≈99px ≈ 38%). An earlier pass cut this to 70px, which crowded
     the labels — "Font Wei…" truncated on a field that had room. */
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 4px;
}

.panel.dock-right .field.pf>.pf-label {
  margin: 0;
  grid-column: 1;
  min-width: 0;
  /* Don't clip the label as a whole, that hid the trailing "applied-from"
     dot (and global markers) in the narrow label column, so the indicator
     only appeared to show up when its hover tooltip did. Truncate the label
     TEXT instead (below) and keep the dot/markers always visible. */
  overflow: visible;
  white-space: nowrap;
}

.panel.dock-right .field.pf>.pf-label .pf-name {
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
}

.panel.dock-right .field.pf>.pf-label .pf-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.panel.dock-right .field.pf>*:not(.pf-label) {
  grid-column: 2;
  min-width: 0;
}

/* The visual inset editor is a box, give it the full width (label above it)
   instead of squeezing it into the right control column. */
.panel.dock-right .field.pf.pf-layout-inset {
  grid-template-columns: 1fr;
}

.panel.dock-right .field.pf.pf-layout-inset>.pf-label,
.panel.dock-right .field.pf.pf-layout-inset>*:not(.pf-label) {
  grid-column: 1;
}

/* ── Airier, minimal inspector density (right dock only) ─────────────────────
   The compact controls read too small in the wider right panel. Bump control
   heights + breathing room for a calmer, Framer-like feel, without adding any
   new chrome. Scoped to .dock-right so the bottom sheet stays dense. */

/* Section headers: a touch larger, more padding. */
.panel.dock-right .acc-head {
  padding: 13px 16px;
  font-size: 13px;
}

/* Section body: more inner padding + vertical rhythm between fields. */
.panel.dock-right .section {
  padding: 16px 16px 20px;
  gap: 18px;
}
/* The Content section already gets that 16px inset from the rule above, but the
   TEXT field's own .text-row adds another 8px/14px on top, so the field floated
   in an oversized double-padded box (unlike the other sections, which have no
   inner .text-row). Drop the inner padding here so the field sits flush at the
   section's 16px, matching Typography / Layout / etc. */
.panel.dock-right .simple-content-section .text-row {
  padding: 0;
}
.panel.dock-right .prop-rows { gap: 18px; }
.panel.dock-right .prop-row { row-gap: 18px; }

/* Field label ↔ control: a little more air, slightly larger label. */
.panel.dock-right .field.pf {
  row-gap: 7px;
  -moz-column-gap: 12px;
       column-gap: 12px;
}

.panel.dock-right .field.pf .pf-label {
  font-size: 11.5px;
  min-height: 16px;
}

/* Controls: taller so they don't feel cramped. Design fields wrap shadcn
   controls, h-8 (32px) input/select shells and bg-muted segmented rows with
   h-6 (24px) buttons. Bump both inside right-dock fields only. */
.panel.dock-right .field.pf .h-8 {
  height: 36px;
}

.panel.dock-right .field.pf .bg-muted {
  padding: 3px;
}

.panel.dock-right .field.pf .bg-muted button.h-6 {
  height: 30px;
}

/* Legacy CSS-field controls (Developer mode) if any render here. */
.panel.dock-right .prop-cell .linput {
  height: 36px;
}

.panel.dock-right .prop-cell .seg button {
  height: 32px;
}

/* ---- Background ▸ Color tab: fill the panel instead of the bottom-dock 50%
   cap, so the gradient builder isn't squished into the left half. ---- */
.panel.dock-right .bg-color-rows {
  max-width: 100%;
}

/* ---- Inspector header (Developer): class row etc. wraps ---- */
.panel.dock-right .inspector-head {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* ---- Developer Editor: Layers stack ABOVE the inspector, both inside the
   right panel (no separate side panel). ---- */
.panel.dock-right .layers-col {
  max-height: 240px;
  min-height: 0;
  overflow-y: auto;
  border-left: 0;
  border-bottom: 1px solid var(--panel-line);
}

.panel.dock-right .layers-resize-handle {
  display: none;
}

/* ---- Code tab: editors stack vertically ---- */
.panel.dock-right .code2-grid.cols-2,
.panel.dock-right .code2-grid.cols-3 {
  grid-template-columns: 1fr !important;
}

.panel.dock-right .ed-pane {
  min-height: 200px;
}

.panel.dock-right .code-scope-tabs {
  flex-wrap: wrap;
  row-gap: 6px;
}

.panel.dock-right .stab-meta {
  display: none;
}

/* ---- Chat: history sidebar overlays instead of splitting the width ---- */
.panel.dock-right .chat2-wrap {
  position: relative;
}

.panel.dock-right .chat2-wrap.side-open {
  grid-template-columns: 1fr;
}
/* Inspector: the history opens FULL-WIDTH over the chat. The 240px side overlay
   below is fine in the wide drawer, but the ~320px inspector has no room for it
  , it left the chat (and Send button) bleeding through on the right. .chat-side
   has an opaque bg, so full width covers everything cleanly; close (×) or "New
   chat" returns to the conversation. */
.uich-inspector-host .panel.dock-right .chat2-wrap.side-open .chat-side {
  width: 100%;
  left: 0;
  border-left: 0;
}
.panel.dock-right .chat2-wrap.side-open .chat-side {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 240px;
  z-index: 6;
  box-shadow: -6px 0 16px rgba(0, 0, 0, 0.12);
  border-left: 1px solid var(--panel-line);
}

/* ---- Globals / variables panel: card layout instead of the wide table ---- */
/* Hide the NAME/VALUE/CSS VARIABLE column headers, rows become stacked cards. */
.panel.dock-right .pr-glob-headrow {
  display: none !important;
}

/* Each variable row: fields stack one-by-one inside a card. */
.panel.dock-right .pr-glob-row {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 12px 10px !important;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--panel-bg-2);
}

.panel.dock-right .pr-glob-row:hover {
  background: var(--panel-bg-2);
  border-color: var(--panel-line-2);
}

/* Collection header card: tag+label row, full-width name input, delete right. */
.panel.dock-right .pr-glob-collhead {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 10px;
}

.panel.dock-right .pr-glob-collhead input[type="text"] {
  grid-column: 1 / -1;
  max-width: none !important;
}

.panel.dock-right .pr-glob-collspacer {
  display: none;
}

.panel.dock-right .pr-glob-collhead .pr-glob-danger {
  grid-column: 1 / -1;
  justify-self: end;
}

/* ---- Deps/assets rows wrap in the narrow panel ---- */
.panel.dock-right .dep {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* ── Canvas quick-action toolbar (Inspecta-style floating pill) ──────────────
   A rounded-full pill portaled over the canvas, pinned bottom-centre. Shows all
   actions in one horizontal row. Colours reuse the existing tokens, the active
   tool is a filled `--primary` circle. */
/* Host is a full-viewport passthrough layer so the canvas stays clickable; each
   pill re-enables pointer events and pins itself (bottom-centre + left-centre). */
.uich-canvas-toolbar-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147482500;
  color-scheme: inherit;
}

/* Positioned row holding the pill + the standalone ✕. Transparent and
   pointer-transparent; only the pill and the ✕ opt back into pointer events. */
.canvas-toolbar-wrap {
  position: fixed;
  /* Centre in the CANVAS area, not the whole viewport: when the panel is docked
     open on the right it reserves `--uich-dock-w`, so shift left by half that to
     stay visually centred over the canvas (falls back to 0 when closed). */
  right: calc(50% - var(--uich-dock-w, 0px) / 2);
  bottom: 24px;
  transform: translateX(50%);
  transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Entrance: slide up into place with a gentle decelerating ease. */
  animation: uich-toolbar-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.canvas-toolbar {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-line);
  box-shadow: 0 16px 44px -12px rgba(0, 0, 0, 0.48), 0 4px 12px -4px rgba(0, 0, 0, 0.32);
}

/* Standalone circular ✕ — hides the pill for this session (returns on refresh).
   Same surface tokens as the pill so it tracks light/dark + skin. */
.canvas-toolbar-wrap .ct-close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid var(--panel-line);
  font: inherit;
  pointer-events: auto;
  background: var(--panel-bg-2);
  color: var(--text-mid);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 16px 44px -12px rgba(0, 0, 0, 0.48), 0 4px 12px -4px rgba(0, 0, 0, 0.32);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.canvas-toolbar-wrap .ct-close:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}
.canvas-toolbar-wrap .ct-close:active {
  transform: scale(0.94);
}
.canvas-toolbar-wrap .ct-close svg {
  width: 16px !important;
  height: 16px !important;
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  display: block;
}
.uich-canvas-toolbar-host[data-theme="light"] .canvas-toolbar-wrap .ct-close {
  box-shadow: 0 16px 40px -12px rgba(15, 15, 21, 0.18), 0 3px 10px -4px rgba(15, 15, 21, 0.12);
}

.uich-canvas-toolbar-host[data-theme="light"] .canvas-toolbar {
  box-shadow: 0 16px 40px -12px rgba(15, 15, 21, 0.18), 0 3px 10px -4px rgba(15, 15, 21, 0.12);
}

@keyframes uich-toolbar-in {

  /* Keep translateX(-50%) through the entrance, or it clobbers the horizontal
     centring (fill-mode:both holds the final transform). */
  from {
    transform: translateX(50%) translateY(calc(100% + 40px));
    opacity: 0;
  }

  to {
    transform: translateX(50%) translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-toolbar-wrap {
    animation-duration: 0.01ms;
  }
}

.canvas-toolbar .ct-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* Pin the full box model, on the live front end the pill is portaled into the
     page <body>, where the theme's global `button` reset would otherwise collapse
     the 34px button and shrink the icons. */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  background: transparent;
  color: var(--text-mid);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

/* Pin the stroke-icon rendering so the front-end theme's global svg reset can't
   shrink, recolour or hide the HugeIcons strokes (keeps the pill identical to
   the backend editor). */
.canvas-toolbar .ct-btn svg {
  width: auto !important;
  height: auto !important;
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
  filter: none !important;
  vertical-align: middle;
  max-width: none !important;
  max-height: none !important;
}

.canvas-toolbar .ct-btn:hover {
  color: var(--text-hi);
  background: var(--panel-bg-3);
}

/* ── dock magnification ──────────────────────────────────────────────────────
   composer-toolbar's useDockMagnify writes --ct-mag per button from the
   pointer's distance to it; CSS does the rest. transform-origin sits at the
   BOTTOM so a growing button rises out of the pill instead of spilling below
   it, which is what makes it read as a macOS dock rather than a zoom.

   `transform` is already in .ct-btn's transition list, so this animates for
   free. The duration stays short (0.1s) on purpose: the pointer is driving it,
   so a long ease feels like lag rather than smoothness. */
/* Size comes from --ct-size (written per button by useDockMagnify), NOT from a
   transform. Width participates in layout, so a growing button pushes its
   neighbours along and the pill widens — which is the dock behaviour. A
   transform: scale() left the pill at a fixed 218px and the buttons simply
   overlapped each other. */
.canvas-toolbar .ct-btn {
  width: var(--ct-size, 34px);
  height: var(--ct-size, 34px);
  /* Width IS transitioned, briefly. Two things make this safe and smooth:
     · the hook measures rest centres once per hover, so a size change can
       never feed back into the next frame's input — no oscillation;
     · 130ms is short enough to track the pointer (a new target interrupts and
       re-targets the running transition, which is what turns a stream of
       discrete pointermove values into continuous motion) and long enough to
       smooth the gaps between events.
     Longer than ~180ms and it visibly trails the cursor; shorter than ~90ms and
     the steps between pointer events start to show. */
  transition:
    width 130ms cubic-bezier(0.22, 0.61, 0.36, 1),
    height 130ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.15s ease,
    color 0.15s ease;
}

/* Returning to rest has no pointer to follow, so it can afford a slower, softer
   settle than the tracking transition above. The class is set on pointerleave. */
.canvas-toolbar.is-settling .ct-btn {
  transition:
    width 260ms cubic-bezier(0.22, 1, 0.36, 1),
    height 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.15s ease,
    color 0.15s ease;
}

/* The pill's own height is pinned so it cannot grow and shove itself up the
   canvas while you sweep along it — only the width moves. A button at its
   48px peak exactly fills the 48px inner height, so nothing spills. */
.canvas-toolbar {
  height: 48px;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  /* The hook already bails out; this covers a --ct-size left behind by a
     setting changed mid-session. */
  .canvas-toolbar .ct-btn { width: 34px; height: 34px; }
}

/* ── tooltips ────────────────────────────────────────────────────────────────
   Portaled into .canvas-toolbar-wrap (see the note in composer-toolbar.jsx), so
   it inherits the host's theme. Inverted against the pill: the pill is near
   black, so a bg-primary tooltip on top of it would disappear. */
/* The tooltip wears the PILL's surface, not a theme abstraction — and this is
   the third thing tried, so the reasoning is worth keeping:
     · --panel-bg-4 : right on dark, invisible in light (#f4f4f5 on a #f6f6f7 page)
     · bg-primary   : the shadcn default, inverts per theme — but measured only
                      1.18:1 against the canvas, because a dark-themed composer
                      floats over the user's LIGHT page
   This pill hovers over a page whose colour we do not control, so neither
   following nor inverting the theme can be right. Matching the pill makes the
   label read as part of it, and reuses the same shadow the pill already relies
   on to separate from arbitrary page content. */
.canvas-toolbar-wrap .ct-tip {
  background: var(--panel-bg-2);
  color: var(--text-hi);
  border: 1px solid var(--panel-line);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: 0 16px 44px -12px rgba(0, 0, 0, 0.48), 0 4px 12px -4px rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

/* Selected = a solid WHITE disc with a black glyph, replacing the old filled
   `--primary` circle. Hover only lifts the glyph (`--text-hi`) on a faint fill,
   so "armed" and "the pointer is here" can never be mistaken for each other.

   Literal #fff / #101014, deliberately NOT `--text-hi` / `--panel-bg-2`: those
   tokens are re-pointed per skin, and under the Elementor skin `--panel-bg-2`
   is a mid-grey (#313336), which turned the glyph muddy instead of black. This
   is a two-colour pressed state, not a themed surface — it should look the same
   on every skin. */
.canvas-toolbar .ct-btn-on,
.canvas-toolbar .ct-btn-on:hover {
  background: #ffffff;
  color: #101014;
}

/* Light pill: a white disc on a near-white toolbar is invisible, so the pressed
   state inverts the other way. Placed after (and one class more specific than)
   the rule above so it wins on both the plain and the hovered state. */
.uich-canvas-toolbar-host[data-theme="light"] .canvas-toolbar .ct-btn-on,
.uich-canvas-toolbar-host[data-theme="light"] .canvas-toolbar .ct-btn-on:hover {
  background: #101014;
  color: #ffffff;
}

/* Disabled Undo/Redo — dimmed and non-interactive (no hover lift). */
.canvas-toolbar .ct-btn-disabled,
.canvas-toolbar .ct-btn-disabled:hover {
  opacity: 0.35;
  cursor: default;
  background: transparent;
  transform: none;
}

.canvas-toolbar .ct-sep {
  width: 1px;
  height: 20px;
  background: var(--panel-line);
  margin: 0 2px;
}

/* Free build: Pro-only canvas action (Draw, Ask AI). The icon pill has no room
   for the usual "PRO" text badge, so it carries the same gradient as a dot in
   the top-right corner. The title/aria-label also say "– Pro", so the state is
   never signalled by colour alone. */
.canvas-toolbar .ct-btn-pro {
  position: relative;
}
.canvas-toolbar .ct-btn-pro::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--uich-pro-grad);
  box-shadow: 0 0 0 1.5px var(--panel-bg-2);
  pointer-events: none;
}

/* ── Gutenberg: dock in-flow instead of overlaying the editor ────────────────
   In the block editor the drawer's `position: fixed; right: 0` shell would sit
   ON TOP of the editor header, covering Saved / Publish / the settings toggle
  , and the admin bar (z-index 99999) would in turn cover the drawer's own
   titlebar. Gutenberg's whole layout root `.interface-interface-skeleton` is
   itself `position: fixed` with `right: 0`, so shrinking its right edge by the
   drawer's visible width pushes the ENTIRE editor (header included) clear of
   the drawer, no z-index war, nothing overlaps, and the header stays usable.

   Both custom properties are written by the dock sync in
   assets/js/uichemy-composer-gutenberg-adapter.js:
     --uich-gb-dock-w    the drawer's currently visible width (0 when closed,
                         ~50px when minimized, its dragged width when open)
     --uich-gb-dock-top   the skeleton's viewport top, so the drawer starts
                         below the admin bar (or at 0 in fullscreen mode)
   `body.uich-gb-dock` is added once on init and never removed, the width var
   alone drives open/close, so `right` can transition both ways instead of
   snapping back when a class disappears. Defaulting the var to 0px keeps this
   byte-identical to stock Gutenberg until the drawer is actually opened. */
body.uich-gb-dock .interface-interface-skeleton {
  left: var(--uich-gb-dock-w, 0px);
  /* Eases in lockstep with the drawer's own translateX transition (same
     duration + curve), so the editor and the drawer move as one. */
  transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  body.uich-gb-dock .interface-interface-skeleton { transition-duration: 0.01ms; }
}
/* Mid width-drag the easing would leave the editor edge trailing the handle;
   the drag adds this class so the push tracks the pointer 1:1 (mirrors
   `.uich-dock-resizing` on Elementor's preview). */
body.uich-gb-dock.uich-gb-dock-resizing .interface-interface-skeleton {
  transition: none;
}

/* ── Bricks: push the builder aside instead of covering it ──────────────────
   Bricks has no single `position: fixed; right: 0` layout root to shrink like
   Gutenberg's skeleton. Its builder is a flex row `.brx-body.main`
   (`#bricks-panel` · `#bricks-preview` · `#bricks-structure`) plus a separate
   fixed full-width `#bricks-toolbar`. Both carry `margin: 0 auto`, so shrinking
   their WIDTH would CENTRE the narrower box, splitting the reserved strip in
   half and leaving the right edge overlapping the drawer. So instead we inset
   from the right with `padding-right` (box-sizing: border-box keeps the outer
   box full-width and left-anchored, exactly like the Elementor `#elementor-
   preview` carve): the flex children reflow into the reduced content box, the
   canvas shrinks, panel + structure stay put, and the toolbar's right-hand
   Save/settings controls (justify-content: space-between) slide left, clear of
   the drawer. `--uich-bricks-dock-w` (written by the push effect in
   composer-app.jsx) is the drawer's visible width, 0 when closed; the
   `body.uich-bricks-dock` class is added once and the var alone drives
   open/close so the inset eases both ways. The selectors carry an id/class +
   element, out-specifying Bricks' own `#bricks-toolbar` / `.brx-body` rules. */
body.uich-bricks-dock .brx-body.main,
body.uich-bricks-dock #bricks-toolbar {
  box-sizing: border-box;
  padding-left: var(--uich-bricks-dock-w, 0px);
  /* Eases in lockstep with the drawer's own translateX transition. */
  transition: padding-left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  body.uich-bricks-dock .brx-body.main,
  body.uich-bricks-dock #bricks-toolbar { transition-duration: 0.01ms; }
}
/* Mid width-drag: track the pointer 1:1 instead of trailing behind the easing
   (mirrors the Gutenberg + Elementor resize guards). */
body.uich-bricks-dock.uich-bricks-dock-resizing .brx-body.main,
body.uich-bricks-dock.uich-bricks-dock-resizing #bricks-toolbar {
  transition: none;
}

/* ── Gutenberg: composer inside the Block tab (InspectorControls) ───────────
   A second, independent surface from the drawer above. WordPress's sidebar owns
   the position, width, scrolling and close button here, so the whole fixed-
   drawer model has to stand down: the panel becomes an ordinary in-flow block
   that fills the sidebar column. Everything is scoped to `.uich-inspector-host`
   (set by the mount in composer/src/index.jsx), so the drawer, in Gutenberg,
   Elementor, Bricks and the front end alike, is untouched. */
.uich-inspector-host {
  display: block;
  width: 100%;
  /* Makes the host a query container so the field rows below can respond to the
     ACTUAL width the composer ends up with, rather than to a hardcoded
     assumption. Change --uichemy-gb-sidebar-w and the rows re-layout on their
     own, no breakpoint to keep in sync. */
  container-type: inline-size;
}

/* Sidebar width. WordPress ships 280px, which fits but forces every control
   onto its own row; this widens it just while a UiChemy block owns the
   inspector (via :has() on our host), so ordinary blocks keep the stock width
   and Page/Block are only ever affected while you're editing a composer block.
   One number to tune, it's a custom property for exactly that reason. */
body[data-uich-builder="gutenberg"] .interface-complementary-area:has(.uich-inspector-host),
body[data-uich-builder="gutenberg"] .interface-interface-skeleton__sidebar:has(.uich-inspector-host) {
  --uichemy-gb-sidebar-w: 320px;
  /* !important because WP's own `.interface-complementary-area{width:280px}`
     lives inside a `@media (min-width:782px)` block. Our selector is more
     specific so it should win on cascade order alone, but if it doesn't, the
     failure mode is a dead strip beside the panel (the skeleton sidebar is
     `width:auto` and stretches, while the 280px scroll container inside it does
     not), which is exactly the gap this pins shut. */
  width: var(--uichemy-gb-sidebar-w) !important;
  max-width: var(--uichemy-gb-sidebar-w) !important;
}
/* Fill the column all the way. The sidebar is a CHAIN of wrappers, skeleton
   sidebar → complementary area (the `overflow:auto` scroll container, also
   carrying `.editor-sidebar__panel`) → its fill → the block inspector, and any
   one of them stopping short of the new width leaves white space to the right of
   the panel while the panel's own dividers stop short of the edge. Stretching
   the whole chain is cheaper than depending on which single link is the culprit. */
body[data-uich-builder="gutenberg"] .interface-complementary-area:has(.uich-inspector-host) .interface-complementary-area__fill,
body[data-uich-builder="gutenberg"] .editor-sidebar__panel:has(.uich-inspector-host),
body[data-uich-builder="gutenberg"] .block-editor-block-inspector:has(.uich-inspector-host) {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Hide WordPress's block card, the icon + "UiChemy Composer" + description
   header at the top of the Block tab. The composer panel carries its own
   identity and the description is static boilerplate, so the card is pure
   vertical cost in a 280px column. Scoped with :has() to the inspector that
   actually contains our host, so every OTHER block keeps its card. */
.block-editor-block-inspector:has(.uich-inspector-host) .block-editor-block-card {
  display: none;
}
.uich-inspector-host .panel,
.uich-inspector-host .panel.dock-right {
  position: static;
  width: 100%;
  max-width: 100%;
  /* min-width: 0 defeats the drawer shell's 320px floor, which would otherwise
     overflow WordPress's 280px sidebar and spill a horizontal scrollbar. */
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  transform: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
/* ...but transparent only holds up while the composer's theme matches the
   WordPress admin chrome behind it, which is light. In dark mode WP's white
   sidebar showed straight through the panel, and the Chat / Editor / Code strip
   sits directly on it: its track is a translucent WHITE wash (`--seg-track` is
   `rgba(255,255,255,.06)` in dark, meant to lift off a dark panel) and its
   labels are dim greys tuned for the same. Over white that is a white row with
   near-invisible text. Paint the panel in dark so every child has the ground it
   was designed against. */
.uich-inspector-host .panel[data-theme="dark"],
.uich-inspector-host .panel.dock-right[data-theme="dark"] {
  background: var(--panel-bg);
}
/* Drawer-only chrome: WordPress already provides every one of these. The close
   button and tab row are the sidebar's own; dragging the width is the sidebar's
   job; and an off-canvas collapse makes no sense for in-flow content. */
.uich-inspector-host .panel-resize,
.uich-inspector-host .dock-edge-toggle,
.uich-inspector-host .dock-theme-fab,
.uich-inspector-host .dock-skin-fab {
  display: none !important;
}
/* The drawer's body scrolls itself against a fixed 100vh shell. In the sidebar
   the scroll container is WordPress's, so let the content size naturally and
   scroll with the rest of the inspector, otherwise it becomes a nested
   scroll area with its own stranded scrollbar. */
.uich-inspector-host .panel-body,
.uich-inspector-host .panel.dock-right .panel-body {
  overflow: visible;
  max-height: none;
  height: auto;
}

/* `.panel-editor-stack` is the grid item inside `.panel-body`'s `1fr` track,
   and it gets its `min-width: 0` guard only from a rule scoped to
   `#uichemy-composer-floating-panel` — an ancestor that doesn't exist in this
   surface, where the host is `#uichemy-composer-inspector-host` instead. Left
   at `min-width: auto`, a grid item's automatic minimum size is its MIN-CONTENT
   width, so the widest row in the inspector became a hard floor on the panel's
   width and the sidebar grew to fit it. Anything that measures its own width to
   decide what to render then oscillates: it widens the panel, re-measures
   wider, renders more, widens again. */
.uich-inspector-host .panel-editor-stack {
  min-width: 0;
}

/* Chat transcript. `.chat2-body` is the scroll container that wraps the message
   list, and its base rule is `flex: 1 1 0` + `min-height: 0` + `overflow-y: auto`
  , built for a panel with a DEFINITE height, where it fills the leftover space.
   The inspector body is `height: auto` (above), so there is no leftover space to
   distribute: it collapsed to its zero basis and clipped the messages inside it.
   The prompt box is a SIBLING of this element, which is why that kept rendering
   while the conversation appeared to vanish.
   Sized to content (basis auto, so it can't collapse) and capped, so a long
   conversation scrolls here instead of pushing the prompt box off the end of an
   ever-growing sidebar. */
.uich-inspector-host .chat2-body {
  flex: 0 1 auto;
  max-height: none;
  overflow: visible;
}
/* …and the message list inside it must NOT be a capped scroll area either. With
   the prompt bar pinned (below), WordPress's sidebar is the single scroller: the
   transcript simply grows and the sidebar scrolls, instead of a short inner pane
   with its own stranded scrollbar. */
.uich-inspector-host .chat-msgs {
  flex: 0 1 auto;
  max-height: none;
  overflow: visible;
}

/* ---- Sticky prompt bar ----------------------------------------------------
   Pin the CONTEXT row + prompt box to the bottom of the sidebar so it stays
   reachable however long the conversation gets.
   The prerequisite is that NOTHING between the composer and WordPress's sidebar
   is itself a scroll container, or the composer sticks to that inner box instead
   of the sidebar viewport. `.chat2-main` looked innocent with only
   `overflow-x: hidden`, but per spec a hidden axis forces the other axis from
   `visible` to `auto`, so it was silently a scroller. Both wrappers are opened
   up here, and their `height: 100%` is dropped since it resolves against an
   auto-height parent in the sidebar anyway. */
.uich-inspector-host .chat2-wrap,
.uich-inspector-host .chat2-main {
  overflow: visible;
  height: auto;
  min-height: 0;
}
.uich-inspector-host .chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  /* Opaque: the transcript scrolls UNDER this, so a translucent bar would show
     message text through the prompt box. */
  background: var(--panel-bg);
  /* Sits in place of the base rule's border-top, which would scroll away with
     the element's own box, this reads as an edge against the scrolling content. */
  box-shadow: 0 -1px 0 var(--panel-line);
  /* Nudge the whole bar 30px further down. Only has an effect on a SHORT
     conversation, where the bar rests at the end of the content with panel space
     left below it; once the chat is long enough to scroll, the bar is pinned to
     the bottom edge and this is ignored. Applied as top margin (not a transform
     or offset) so the bar keeps its real position in the layout, nothing ends up
     overlapping it or sliding underneath. */
  margin-top: 30px;
}

/* The Code tab's panes have the identical defect from the identical cause:
   `flex: 1` with an explicit `min-height: 0` (and `overflow-y: auto` on the
   body), so they also floor at zero once the parent stops having a definite
   height. Given a FLOOR rather than sized to content, because CodeMirror needs a
   real height to lay its editor out, sizing to content would leave it 0 tall
   even after this. */
.uich-inspector-host .code2,
.uich-inspector-host .code2-body {
  min-height: 240px;
}
/* Cap each code editor at a fixed height with its own scroll. Without this,
   CodeMirror (height:100% of .ed-pane-body-live, which flexes to fit) grows to
   show every line, so a long HTML/CSS/JS file balloons the whole sidebar. A
   fixed box height turns each editor into a fixed, internally-scrolling pane.
   Inspector-only, the drawer keeps flex:1 and fills its own shell. */
.uich-inspector-host .ed-pane-body-live {
  flex: 0 0 auto;
  height: 280px;
}
/* Match the Gutenberg-native 2px radius on the code editor panes (they ship at
   8px), same treatment as the prompt box, so the composer reads the same across
   surfaces. Applies everywhere: .uich-composer-host is on both the Gutenberg
   inspector AND the Elementor/Bricks/front-end drawer. */
.uich-composer-host .ed-pane {
  border-radius: 2px;
}

/* ── Chat tab: dock the compose bar at the foot of the sidebar ───────────────
   The rules above deliberately let the inspector flow at content height and
   scroll with WordPress's sidebar, right for the Editor/Code field lists.
   Chat wants the opposite: the message history fills the middle and the compose
   bar is pinned to the bottom (the drawer's model). So, ONLY while the Chat tab
   is active, the composer marks its shell `.panel.tab-chat`, a class the Editor
   and Code tabs never carry, so nothing here leaks onto them, rebuild a
   fill-height flex column from WordPress's inspector down through our host and
   panel. .chat2-wrap is already flex:1, so once its ancestors fill, the existing
   .chat2-main → .chat2-body (scroll) → .chat-composer (foot) layout resolves
   exactly as it does in the drawer. The sticky bottom on the compose bar is the
   fallback for any WordPress wrapper that still refuses to fill. */
body[data-uich-builder="gutenberg"] .block-editor-block-inspector:has( .uich-inspector-host .panel.tab-chat ),
body[data-uich-builder="gutenberg"] .block-editor-block-inspector:has( .uich-inspector-host .panel.tab-chat ) [role="tabpanel"] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.uichemy-composer-inspector-host:has( .panel.tab-chat ),
.uich-inspector-host:has( .panel.tab-chat ),
.uich-inspector-host .panel.tab-chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
}
/* Prompt box: pinned to the bottom of the sidebar, and aligned to the panel's
   horizontal rhythm.

   Sticky is safe here now, and it wasn't before. WordPress's sidebar scrolls past
   the bottom of our panel, its Advanced panel and "Skip to the selected block"
   button live down there, so without this the prompt box scrolls away with the
   rest of the content. `bottom: 0` keeps it against the scrollport while
   `.chat2-main` still overlaps it.
   The reason this was removed earlier: sticky pins by LIFTING an element off its
   real position, and back when the pick notice was in normal flow the box would
   ride up on top of it. The notice is `position: absolute` now and can't be
   pushed into, so the failure mode is gone. The opaque background is what makes
   the lift read correctly, the transcript scrolls underneath, and without a
   paint the messages ghost through.

   Padding: the box shipped at `8px 12px` while `.chat-status` and `.chat-msgs`
   are both `14px`, so the prompt box hung 2px wider on each side than the
   messages directly above it, two stray vertical edges in a 320px column. 14px
   puts left, right, the transcript and the scope row on one shared edge. Only the
   inline padding is set, so the compose bar keeps its own tighter 8px block
   rhythm. */
.uich-inspector-host .panel.tab-chat .chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--panel-bg);
  padding-inline: 14px;
}
/* Chat tab: fill the sidebar height. The fixed height goes on the PANEL, and the
   flex column inside it then divides that up on its own, scope pill and compose
   bar at their natural heights, transcript taking everything left over.

   Only ONE measured number, and it is the stable one: 116px of chrome above the
   panel (the editor header plus WordPress's Page/Block tab row). An earlier
   version put `height: calc(100vh - 440px)` on the TRANSCRIPT instead, which
   meant estimating the compose bar's height as well, and every pixel that
   estimate was short pushed the prompt box off the bottom of the screen. Here the
   compose bar measures itself, so it is always fully visible.

   Errors stay bounded and cosmetic: too tall and WordPress's sidebar scrolls a
   little (the sticky compose bar above keeps the prompt box on screen), too short
   and there is a small gap under it. The min-height is the floor for short
   viewports and for fullscreen mode, where the chrome above is smaller. */
.uich-inspector-host .panel.tab-chat {
  height: calc(100vh - 116px);
  min-height: 360px;
  max-height: none;
}
/* THE reason the compose bar drifted down on every send.
   `.chat2-wrap` is `display: grid`, and with no `grid-template-rows` its single
   row is `auto`, content-sized. `.chat2-main` is `height: 100%`, which resolves
   against that auto row, so it too collapsed to content height: the transcript
   never got a bounded box, never scrolled, and the whole column simply grew taller
   with each message, pushing the prompt box down with it. Sticky can't fix that –
   the box genuinely IS at the end of ever-growing content.
   `minmax(0, 1fr)` pins the row to the container's (already fixed) height, and the
   `min-height: 0` chain lets the boxes inside shrink below content so the
   transcript's own `overflow-y: auto` can finally engage. Now the transcript
   scrolls internally and the prompt box holds the bottom edge, unmoved by sends. */
.uich-inspector-host .panel.tab-chat .chat2-wrap {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
.uich-inspector-host .panel.tab-chat .chat2-main {
  min-height: 0;
}
/* The transcript takes the slack and owns the scrolling.
   `flex-basis: auto` with a `min-height` floor, never `flex: 1 1 0`, a zero
   basis floors at zero the moment anything upstream fails to supply a definite
   height, and then the conversation and the "What do you want to do?" empty state
   both vanish, leaving just the prompt box. An auto basis starts from content
   height, and the floor means the worst case is a transcript that scrolls sooner
   than it should, not one that disappears. */
.uich-inspector-host .panel.tab-chat .chat2-body {
  /* PINNED to the viewport, not floored. This box holds BOTH chat states, the
     "What do you want to do?" setup card AND the message list, so whatever it
     measures is the height of both. Earlier it was `min-height` + `flex: 1 1
     auto`, which let a long conversation grow it taller than the setup card
     (the parent chain that should have capped it doesn't resolve on WordPress's
     inspector markup). A fixed `height` removes that: the box is exactly this
     tall no matter how many messages it holds, so the panel reads identically
     whether the chat is empty or full, which is the whole request here.
       flex 0 0 auto → content can't stretch or squash the box off this height;
       overflow-y   → a long conversation scrolls INSIDE it, so the compose bar
                      below never moves when you send.
     470px is everything that isn't this box: ~100px of panel tab rows + ~53px
     scope row + ~175px compose bar + ~104px of editor chrome above the panel +
     margins. Erring high a touch keeps the compose bar fully visible, a small
     gap is fine, a clipped Send button is not. This is the one number to tune. */
  flex: 0 0 auto;
  height: calc(100vh - 470px);
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
/* Empty state: CENTER it in the slack instead of letting it hug the top.
   The transcript is now viewport-tall even with no messages, and the setup deck
   (sparkles disc, "What do you want to do?", suggestion cards) is content-height
  , top-aligned it reads as a stack with dead space under it, which is exactly
   the "unfilled panel" look this layout exists to kill. `margin: auto 0` centres
   it in whatever slack the screen provides, so the empty state reads as a
   composed welcome screen at 700px and at 1200px alike, same idiom as every
   chat product's zero state. `auto` margins collapse to 0 when space runs out,
   so on short screens it degrades to exactly the current top-aligned flow.
   On the empty-state WRAPPER, not `.ai-setup` itself: `.ai-setup` also renders
   inside the drawer (content-height there), where an auto margin is a no-op
   anyway, but scoping to the inspector keeps intent readable. */
.uich-inspector-host .panel.tab-chat .chat2-body > .ai-setup {
  margin-top: auto;
  margin-bottom: auto;
}
/* Message list fills the screen-sized transcript instead of hugging the top.
   The inspector rule further up sets `flex: 0 1 auto` on `.chat-msgs` to stop it
   being a second scroll area (the parent `.chat2-body` owns the scrolling, two
   nested scrollbars otherwise). But `flex-grow: 0` also means it never claims the
   slack, so with a short conversation the list ends where the last message ends
   and the rest of the transcript is dead space.
   `flex: 1 0 auto` restores just the growth:
     grow   1 → takes the leftover height, so the list is always as tall as the
                visible transcript, at any window size;
     shrink 0 → never compresses the messages to make room, once the thread is
                taller than the screen it keeps its natural height and the parent
                scrolls, which is what keeps the single-scrollbar behaviour;
     basis auto → still sized from content, so nothing collapses if the height
                above is ever missing.
   Messages stay top-aligned inside it, so new ones fill downward toward the
   prompt box the way every chat thread does. */
.uich-inspector-host .panel.tab-chat .chat-msgs {
  flex: 1 0 auto;
}
/* Match WordPress's native control radius (2px) on the compose box so the prompt
   bar reads consistently across surfaces. Applies everywhere: .uich-composer-host
   is on both the Gutenberg inspector AND the Elementor/Bricks/front-end drawer. */
.uich-composer-host .composer-input {
  border-radius: 2px;
}

/* WordPress's sidebar keeps its native 280px, the composer adapts to it rather
   than the other way round, so a UiChemy block never resizes the sidebar out
   from under Page/Block.
   To actually FIT 280px, the field rows stop being two columns. The drawer lays
   them out Webflow-style (92px label column + control), which inside 280px –
   ~248px once WP's 16px gutters are removed, leaves ~146px for the control:
   too narrow for a select plus its dynamic-value button. Stacking label ABOVE a
   full-width control is also exactly what the block editor does at this width
   (see its own "FONT SIZE" over the S/M/L/XL row), so this lands closer to
   native, not further from it. */
/* Compaction. The control HEIGHT stays at WordPress's own 36px (`controlHeight`
   in its components theme), that's the size we're matching, and shrinking it
   would make the panel look less native, not more. What made this feel oversized
   was the vertical rhythm BETWEEN fields: the drawer's 18px row gaps were tuned
   for a 420px panel with two-column rows, and once rows stack each gap is paid
   twice as often. 12px keeps fields clearly separated at a third less height. */
.uich-inspector-host .panel.dock-right .prop-rows { gap: 12px; }
.uich-inspector-host .panel.dock-right .prop-row { row-gap: 12px; }

@container (max-width: 359px) {
  .uich-inspector-host .panel.dock-right .field.pf {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    -moz-column-gap: 0;
         column-gap: 0;
    row-gap: 4px;
  }
  .uich-inspector-host .panel.dock-right .field.pf > .pf-label {
    grid-column: 1;
    /* The label owns a full row now, so it no longer needs to be squeezed into a
       fixed column, let long names wrap instead of truncating with an ellipsis. */
    white-space: normal;
  }
  /* Anything that was pinned to the control column (input stacks, hints,
     applied-from notes) now follows the label in the single column. */
  .uich-inspector-host .panel.dock-right .field.pf > *:not(.pf-label) {
    grid-column: 1;
  }
}
/* Start the drawer below the admin bar. wp-admin gets no `admin-bar` body class
   (that one is front-end only), so the base `body.admin-bar` rule above never
   matches here, hence this Gutenberg-specific offset, measured from the
   skeleton so fullscreen mode and the 782px breakpoint both come out right. */
body.uich-gb-dock #uichemy-composer-floating-panel.uich-dock-right,
body.uich-gb-dock .uichemy-composer-floating-panel.uich-dock-right {
  top: var(--uich-gb-dock-top, 0px);
}

/* ---- Control surfaces (dock-right only) ------------------------------------
   Scoped to the floating right dock so the bottom dock and the Gutenberg
   inspector keep their existing chrome.

   Every control gets a VISIBLE edge and a fill. The shadcn recipes these
   controls share (`border border-input bg-transparent` — LengthInput,
   SelectCustomInput and INPUT_CLS all use it) render as an unfilled box with a
   very low-contrast outline, which in the dark panel reads as no field at all:
   a bare "px − +" floating with nothing around it. Painting both the border and
   the surface from the panel's own tokens makes each field an obvious target in
   every skin. Colours are existing tokens — nothing new is introduced. */
.panel.dock-right .field.pf .border-input,
.panel.dock-right .field.pf .input,
.panel.dock-right .field.pf .select,
.panel.dock-right .field.pf .textarea,
.panel.dock-right .field.pf .swatch-input,
.panel.dock-right .field.pf .combo,
.panel.dock-right .field.pf .seg {
  /* Controls MUST stay visible in every skin. Measured in a browser: inside the
     panel `--panel-bg-2` computes to the SAME white as `--panel-bg` (the source
     file says #f7f7fa, but something later in the cascade overrides it), so a
     token-based fill painted nothing and the field vanished. Twice.

     These two neutrals are deliberately theme-agnostic instead of tokens: a
     mid-grey at low alpha darkens a light panel and lightens a dark one, so the
     control cannot disappear no matter how the tokens resolve. Not a new brand
     colour — a neutral scrim over whatever the panel already is. */
  /* No resting border — the field reads from its faint fill alone; the border
     appears only on hover / focus (rules below). */
  border-color: transparent;
  background-color: rgba(128, 128, 128, 0.1);
}

/* One height for every control. The components hard-code Tailwind `h-8` (32px)
   while the panel token says 30px, so the two systems disagreed and rows sat at
   different heights. The token wins here. */
.panel.dock-right .field.pf .border-input,
.panel.dock-right .field.pf .input,
.panel.dock-right .field.pf .select,
.panel.dock-right .field.pf .swatch-input,
.panel.dock-right .field.pf .combo {
  height: var(--input-h);
  min-height: var(--input-h);
}

.panel.dock-right .field.pf .border-input:hover,
.panel.dock-right .field.pf .input:hover,
.panel.dock-right .field.pf .select:hover,
.panel.dock-right .field.pf .textarea:hover,
.panel.dock-right .field.pf .swatch-input:hover,
.panel.dock-right .field.pf .combo:hover,
.panel.dock-right .field.pf .seg:hover,
.panel.dock-right .field.pf .border-input:focus-within,
.panel.dock-right .field.pf .input:focus,
.panel.dock-right .field.pf .select:focus,
.panel.dock-right .field.pf .textarea:focus,
.panel.dock-right .field.pf .swatch-input:focus-within,
.panel.dock-right .field.pf .combo:focus-within {
  border-color: rgba(128, 128, 128, 0.75);
  background-color: rgba(128, 128, 128, 0.18);
}

/* The inner <input>/<select> inside a bordered wrapper must stay transparent,
   otherwise it paints a second, slightly different box inside the first. */
.panel.dock-right .field.pf .border-input input,
.panel.dock-right .field.pf .border-input select {
  background-color: transparent;
}

/* ---- Framer-style unit suffix (dock-right only) ---------------------------
   Framer prints the unit as quiet text INSIDE the field ("16 PX", "0 X")
   rather than as a chip sitting beside the number. It's still a button that
   opens the unit menu, so the chip fill returns on hover/open. */
.panel.dock-right .upill-btn {
  background: transparent;
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 9.5px;
  border-radius: var(--radius);
}

.panel.dock-right .upill-btn:hover,
.panel.dock-right .upill.open .upill-btn {
  background: var(--panel-bg-4);
  color: var(--text-hi);
}

/* ---- Framer-style −/+ steppers on length fields (dock-right only) ---------
   The value could already be stepped with ArrowUp/Down or an alt-drag scrub;
   these buttons make that discoverable. Quiet by default so 40+ fields don't
   turn into chrome — they pick up a fill on hover. */
/* The stepper is its own filled box beside the field (reference design), not a
   pair of glyphs crowded inside it. */
.panel.dock-right .lin-step {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: var(--input-h);
  padding: 0 2px;
  /* Same theme-agnostic neutrals as the fields above, for the same reason. */
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: rgba(128, 128, 128, 0.1);
}

.panel.dock-right .lin-step-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  width: 15px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  border-radius: var(--radius);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.panel.dock-right .lin-step-btn:hover {
  background: var(--panel-bg-4);
  color: var(--text-hi);
}

.panel.dock-right .lin-step-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Length field + its stepper box sit on one row; the field takes the space. */
.panel.dock-right .field.pf .lin-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.panel.dock-right .field.pf .lin-row > .border-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* The colour field carries a 200px cap for use in gradient-stop pickers. Inside
   an inspector row that made it visibly shorter than every other control, so
   let it fill the column like the rest. */
.panel.dock-right .field.pf .swatch-input.color-input {
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROL STATES  ·  right dock only
   ───────────────────────────────────────────────────────────────────────────
   Every control in the panel — select, length, number, text, colour, segmented,
   spacing cell, unit pill — reads from one state matrix:

     empty       quiet border, placeholder at --text-dim
     filled      same box, value at --text-hi
     hover       border lifts, fill warms slightly
     focus       brand ring + brand border  ← was identical to hover before
     active      fill deepens on press
     disabled    45% opacity, not-allowed, hover suppressed
     inherited   value dimmed (cascade), unchanged from today
     invalid     danger border + danger ring

   The neutral greys stay rgba(128,128,128,…) on purpose: a mid-grey at low
   alpha darkens a light panel and lightens a dark one, so a control cannot
   vanish however the tokens resolve (see the note above about that happening
   twice). Only the focus ring is branded, via --accent-rgb, which each skin
   already re-points — so focus reads Elementor-pink under the Elementor skin.

   Geometry, colour language and layout are untouched; this only adds states.
   Self-contained: delete from this banner to the end of the file to revert.
   ═══════════════════════════════════════════════════════════════════════════ */

.panel.dock-right {
  --ctl-line: rgba(128, 128, 128, 0.45);
  --ctl-line-hover: rgba(128, 128, 128, 0.70);
  --ctl-fill: rgba(128, 128, 128, 0.10);
  --ctl-fill-hover: rgba(128, 128, 128, 0.16);
  --ctl-fill-active: rgba(128, 128, 128, 0.24);
  /* ONE ring, not three. The previous version stacked a solid accent border, a
     near-opaque grey hairline and a 3px accent glow — 4px of chrome around
     every focused field, which read as a fat blurry band. It passed a contrast
     check and looked wrong; the number was not the goal.
     Now: neutral border at hover strength, plus a single 2px accent ring.

     TWO alphas since the accent went monochrome. A chromatic accent survives a
     mid alpha — 45% indigo still reads as indigo. White at 45% does not read as
     a white ring, it reads as a grey haze, and the same at black on the light
     panel. So the ring splits by JOB:
       --ctl-ring       the stroke that IS the focus indicator (a 2px solid
                        outline on fields, steppers, pills, icon buttons) —
                        near-opaque, so white stays a crisp hairline;
       --ctl-ring-soft  the 3px lift that sits OUTSIDE an already-solid focus
                        border on the prompt box — a whisper, because the border
                        beside it is doing the work. */
  --ctl-ring: rgba(var(--accent-rgb), 0.85);
  --ctl-ring-soft: rgba(var(--accent-rgb), 0.14);
  --ctl-line-focus: var(--ctl-line-hover);
  /* FLUSH with the panel, on request: the prompt box carries no fill step at
     all, and its 1px --ctl-line border is the only thing stating the shape.
     This is the same figure/ground the light theme already used (a #ffffff box
     on a white panel), so both themes now describe the box the same way.

     History, so nobody "fixes" this back: it was a raised surface first
     (translucent grey — read as a stray patch), then pure #000 to look recessed.
     Recessed did not survive contact with the real skins. Against the Elementor
     dark panel (#1f2124) black separates by 1.30:1 and against the shadcn dark
     panel (#09090b) by ~1.13:1 — far too little to read as a deliberate well,
     so it just looked like the same surface with a border on it.

     `var(--panel-bg)`, NOT a hardcoded #1f2124: this block is skin-agnostic, and
     the dark panel is #1f2124 on Elementor but #1e1e1e on Gutenberg. Hardcoding
     either one leaves the other a hair off, which is worse than flush — a
     mismatch too small to look intentional. The token keeps it exactly flush in
     every skin and theme (Elementor dark #1f2124, Gutenberg dark #1e1e1e, both
     lights #ffffff). --panel-bg is declared on the [data-uich-composer-skin]
     ancestor, so it is in scope here — verified resolving, not assumed. */
  --ctl-card: var(--panel-bg);
}

.uich-composer-host[data-theme="light"] .panel.dock-right,
[data-uich-composer-theme="light"] .panel.dock-right,
.panel.dock-right[data-theme="light"] {
  /* --ctl-card is NOT re-stated here any more. It is `var(--panel-bg)` in the
     block above, which already resolves to #ffffff on this theme — so the box
     stays flush with the white panel exactly as before, with its 1px --ctl-line
     border stating the shape. Repeating the literal here only gave the two
     themes a way to drift apart. */
  /* Lighter line in light mode. The shared 0.45 grey renders as #c6c6c6 on
     white — 1.71:1, which is a hard rule, and it became the loudest thing in the
     panel the moment the prompt box went white and the border started carrying
     the shape on its own. 0.28 renders #dbdbdb at 1.38:1: still unmistakably a
     line, no longer a rule. Dark is untouched — the same 0.45 grey lands at
     #3f3f40 there, which is already quiet against a near-black panel. */
  --ctl-line: rgba(128, 128, 128, 0.28);
  /* Kept proportional. Left at 0.70 the hover would jump from #dbdbdb to
     ~#6f6f6f — a step three times the size of the resting line, which would read
     as a different control rather than the same one hovered. 0.42 keeps a clear
     step (1.66:1) at the new scale. --ctl-line-focus follows this. */
  --ctl-line-hover: rgba(128, 128, 128, 0.42);
}

/* ── hover: lift the border, warm the fill ────────────────────────────────── */
.panel.dock-right .field.pf .border-input:hover,
.panel.dock-right .field.pf .input:hover,
.panel.dock-right .field.pf .select:hover,
.panel.dock-right .field.pf .textarea:hover,
.panel.dock-right .field.pf .swatch-input:hover,
.panel.dock-right .field.pf .combo:hover,
.panel.dock-right .field.pf .seg:hover {
  border-color: var(--ctl-line-hover);
  background-color: var(--ctl-fill-hover);
}

/* ── focus: a brand ring, unmistakably different from hover ───────────────── */
/* This is the fix. Before, :hover and :focus-within shared one rule, so a
   focused field looked exactly like a hovered one and you could not tell where
   the keyboard was. */
.panel.dock-right .field.pf .border-input:focus-within,
.panel.dock-right .field.pf .input:focus,
.panel.dock-right .field.pf .select:focus,
.panel.dock-right .field.pf .textarea:focus,
.panel.dock-right .field.pf .swatch-input:focus-within,
.panel.dock-right .field.pf .combo:focus-within {
  border-color: var(--ctl-line-focus);
  background-color: var(--ctl-fill-hover);
  /* `outline` rather than a spread box-shadow. A spread shadow draws its outer
     corner at (radius + spread), so on a 6.4px field the ring's arc is 8.4px
     while the field's own corner stays 6.4px — the two arcs don't coincide and
     the corners read as fat blobs. An outline at offset 0 follows the border
     box exactly, so the stroke is uniform all the way round. */
  outline: 2px solid var(--ctl-ring);
  outline-offset: 0;
  box-shadow: none;
}

/* ── active: press feedback on anything clickable ─────────────────────────── */
.panel.dock-right .field.pf .select:active,
.panel.dock-right .field.pf .swatch-input:active,
.panel.dock-right .field.pf .combo:active,
.panel.dock-right .lin-step-btn:active,
.panel.dock-right .upill-btn:active,
.panel.dock-right .sb-link:active {
  background-color: var(--ctl-fill-active);
}

/* ── disabled: one treatment, and hover must not fight it ─────────────────── */
.panel.dock-right .field.pf :disabled,
.panel.dock-right .field.pf .is-disabled,
.panel.dock-right .field.pf [aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.panel.dock-right .field.pf .border-input:has(:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

.panel.dock-right .field.pf .border-input:has(:disabled):hover,
.panel.dock-right .field.pf .select:disabled:hover,
.panel.dock-right .field.pf .input:disabled:hover {
  border-color: var(--ctl-line);
  background-color: var(--ctl-fill);
}

/* ── empty vs filled ──────────────────────────────────────────────────────── */
/* A placeholder must read as absent, a real value as present. They were the
   same weight, which is why an empty Display select and a set one looked alike. */
.panel.dock-right .field.pf input::-moz-placeholder, .panel.dock-right .field.pf textarea::-moz-placeholder {
  color: var(--text-dim);
  opacity: 1;
}
.panel.dock-right .field.pf input::placeholder,
.panel.dock-right .field.pf textarea::placeholder {
  color: var(--text-dim);
  opacity: 1;
}

.panel.dock-right .field.pf input,
.panel.dock-right .field.pf select,
.panel.dock-right .field.pf textarea {
  color: var(--text-hi);
}

/* A select showing no value (empty option) sits at placeholder weight. */
.panel.dock-right .field.pf select:invalid,
.panel.dock-right .field.pf select.is-empty {
  color: var(--text-dim);
}

/* ── invalid ──────────────────────────────────────────────────────────────── */
.panel.dock-right .field.pf [aria-invalid='true'],
.panel.dock-right .field.pf .is-invalid {
  border-color: var(--uich-danger);
}

.panel.dock-right .field.pf [aria-invalid='true']:focus,
.panel.dock-right .field.pf [aria-invalid='true']:focus-within,
.panel.dock-right .field.pf .is-invalid:focus-within {
  border-color: var(--uich-danger);
  box-shadow: 0 0 0 2px rgba(255, 122, 122, 0.30);
}

/* ── keyboard focus on the panel's bare buttons ───────────────────────────── */
/* Steppers, unit pills, chain toggles and section heads had no visible focus at
   all — tabbing through the panel was invisible. :focus-visible keeps the ring
   off mouse clicks. */
.panel.dock-right .lin-step-btn:focus-visible,
.panel.dock-right .upill-btn:focus-visible,
.panel.dock-right .sb-link:focus-visible,
.panel.dock-right .sb-cell:focus-visible,
.panel.dock-right .acc-head:focus-visible,
.panel.dock-right .seg button:focus-visible {
  outline: 2px solid var(--ctl-ring);
  outline-offset: 0;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPACING + TYPE SCALE  ·  right dock only
   ───────────────────────────────────────────────────────────────────────────
   Driven by variables so the scale can be tuned live (see panel-scale.html)
   and then baked in — no hunting through rules to change a gap.

   Fixes a genuine inversion in the previous values: rows sat 18px apart while a
   section header sat only 16px from its own content, so every row read as
   separate as a whole section. Spacing should widen outwards:

       within a row  <  between rows  <  section to section

   Type gains a real step too. A 13px title against an 11.5px label is a 1.5px
   difference — not enough to register as hierarchy.

   Self-contained: delete from this banner to the end of the file to revert.
   ═══════════════════════════════════════════════════════════════════════════ */

.panel.dock-right {
  /* type */
  --pf-sec-fs: 14px;        /* section title  (was 13)   */
  --pf-sec-fw: 600;
  --pf-label-fs: 12px;      /* field label    (was 11.5) */
  --pf-value-fs: 12px;      /* control value             */

  /* spacing, narrowest to widest */
  --pf-label-gap: 6px;      /* label → control, inside one row  (was 7)  */
  --pf-row-gap: 12px;       /* row → row                        (was 18) */
  --pf-sec-head-gap: 14px;  /* section title → first row        (was 16) */
  --pf-sec-pad-x: 16px;
  --pf-sec-pad-b: 18px;     /* section bottom                   (was 20) */
  --pf-label-w: 96px;
}

/* ── section header ───────────────────────────────────────────────────────── */
.panel.dock-right .acc-head {
  padding: 12px var(--pf-sec-pad-x);
  font-size: var(--pf-sec-fs);
  font-weight: var(--pf-sec-fw);
}

/* ── section body ─────────────────────────────────────────────────────────── */
.panel.dock-right .section {
  padding: var(--pf-sec-head-gap) var(--pf-sec-pad-x) var(--pf-sec-pad-b);
  gap: var(--pf-row-gap);
}

.panel.dock-right .prop-rows { gap: var(--pf-row-gap); }
.panel.dock-right .prop-row { row-gap: var(--pf-row-gap); }

/* ── one row ──────────────────────────────────────────────────────────────── */
.panel.dock-right .field.pf {
  grid-template-columns: var(--pf-label-w) minmax(0, 1fr);
  row-gap: var(--pf-label-gap);
  -moz-column-gap: 12px;
       column-gap: 12px;
}

.panel.dock-right .field.pf .pf-label {
  font-size: var(--pf-label-fs);
}

/* ── control values ───────────────────────────────────────────────────────── */
.panel.dock-right .field.pf input,
.panel.dock-right .field.pf select,
.panel.dock-right .field.pf textarea {
  font-size: var(--pf-value-fs);
}

/* ── one corner radius for every control ──────────────────────────────────────
   The panel was mixing two radii: `.select` takes var(--radius) (6.4px) while
   anything using Tailwind's `rounded-md` gets calc(var(--radius) - 2px) =
   4.4px. Side by side in the same row that reads as a mistake, and it also made
   the focus ring's corner disagree with the field's own. One value, everywhere. */
.panel.dock-right .field.pf .border-input,
.panel.dock-right .field.pf .input,
.panel.dock-right .field.pf .select,
.panel.dock-right .field.pf .textarea,
.panel.dock-right .field.pf .swatch-input,
.panel.dock-right .field.pf .combo,
.panel.dock-right .field.pf .seg,
.panel.dock-right .lin-step {
  border-radius: var(--radius);
}

/* The inner input must not paint its own, smaller corner inside the wrapper. */
.panel.dock-right .field.pf .border-input > input,
.panel.dock-right .field.pf .border-input > select {
  border-radius: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT  ·  right dock only
   ───────────────────────────────────────────────────────────────────────────
   The CSS half of the minimal chat pass. Numbers are measured off shadcn/ui's
   own chat components (Bubble + MessageScroller, June 2026), whose scroller is
   384px against our 420px dock, so they transfer nearly 1:1:

       turn gap 32   ·   content padding 20   ·   text 14 / 22.75
       composer radius 18

   NOT reachable from this repo: the message and bubble elements themselves.
   `.chat-msgs` is the only message-level hook here — the individual turns are
   rendered AND styled by the Pro bundle, so the user-bubble geometry (10/12
   padding, r22, max-width 80%) and the ghost assistant treatment have to be
   done there. Same for removing the sidebar, the follow-up chips and the
   status bar, which are Pro markup.

   Also fixes four surfaces that are currently INVISIBLE: .chat-composer,
   .chat-side, .chat-followup and .chat-status paint with --panel-bg-2/-3,
   which commit a94f4dc pointed at --panel-bg. A gradient between two identical
   colours is flat; a fill equal to its parent is nothing. They use the same
   neutral scrim the panel controls use, so they cannot vanish again whatever
   the tokens resolve to.

   Self-contained: delete from this banner to the end of the file to revert.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── message stream ───────────────────────────────────────────────────────── */
.panel.dock-right .chat-msgs {
  padding: 20px;
  gap: 32px;
}

/* ── composer ─────────────────────────────────────────────────────────────── */
.panel.dock-right .chat-composer {
  margin: 0 16px 16px;
  border-radius: 18px;
  /* Solid --ctl-card, not the old rgba(128,128,128,0.10): the translucent grey
     let the panel show through, which is what read as a patch instead of a
     surface. See the token for why this one is solid. */
  background: var(--ctl-card);
  /* Back to the lighter line now that --ctl-card carries the card: a solid fill
     AND a 0.70-alpha border together read as a heavy slab. The fill does the
     separating, the hairline just finishes the edge. */
  border: 1px solid var(--ctl-line);
  padding: 8px 14px 8px 8px;
  box-shadow: none;
}

/* Focus can no longer just darken the border (it is already at hover strength),
   so it lights the accent ring instead — one ring, on the outer card only. */
.panel.dock-right .chat-composer:focus-within {
  border: 1px solid var(--ctl-line);
  box-shadow: none;
}

.panel.dock-right .chat-composer .composer-input textarea {
  font-size: 14px;
  line-height: 22.75px;
}

/* ── sidebar ──────────────────────────────────────────────────────────────── */
/* Kept, not hidden — it is Pro markup. Given a real surface so the split reads
   as intentional rather than as a stray border.

   OPAQUE, not the 6% wash this used to carry. The history panel is an OVERLAY:
   `position: absolute; inset: 0 auto 0 0` over the conversation (see the
   .side-open rule earlier in this file, whose comment already assumed "an opaque
   bg covers everything cleanly"). At 6% it did not — measured in the editor, the
   messages read straight through the New chat button and the Recent list, which
   is what made the panel look broken rather than layered. */
.panel.dock-right .chat-side {
  background: var(--panel-bg-2);
  /* It floats above the conversation, so it needs its own edge. */
  box-shadow: inset 1px 0 0 var(--panel-line);
}

/* ── follow-up chips ──────────────────────────────────────────────────────── */
/* Quietened rather than removed: weight 600 at full text colour made three
   suggestions shout louder than the reply above them. */
.panel.dock-right .chat-followups {
  gap: 6px;
  /* margin-left is deliberately NOT touched. The 36px in the base rule aligns
     the chips past the assistant avatar, which is Pro markup I cannot see from
     this repo — zeroing it here would have knocked them out of alignment with
     the message text above. */
}

.panel.dock-right .chat-followup {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-mid);
  background: rgba(128, 128, 128, 0.08);
  border-color: var(--ctl-line);
  border-radius: 20px;
  padding: 5px 11px;
}

.panel.dock-right .chat-followup:hover {
  color: var(--text-hi);
  background: rgba(128, 128, 128, 0.16);
}

/* ── status bar ───────────────────────────────────────────────────────────── */
/* The gradient ran between two colours that now resolve identically, i.e. no
   gradient at all. One flat scrim plus a hairline does the separating. */
.panel.dock-right .chat-status {
  background: rgba(128, 128, 128, 0.12);
  border-bottom-color: var(--panel-line);
  padding: 7px 16px;
  font-size: 11.5px;
}

/* ── thinking / loading ───────────────────────────────────────────────────── */
.panel.dock-right .chat-loading {
  font-size: 14px;
  line-height: 22.75px;
  color: var(--text-dim);
}

/* ── composer: one card, not eight boxes ─────────────────────────────────────
   The composer was drawing eight nested frames: the outer .chat-composer, then
   .composer-input with its OWN border, radius and background inside it, then a
   bordered box around each of the four icon buttons, the chevron, and the send
   pill. Reference composers draw one card and put exactly two shapes in it.

   Everything below removes a frame rather than adding one. */

/* 2 → the inner frame goes. .composer-input becomes a plain stack; the outer
   .chat-composer is the only box, so focus rings once instead of twice. */
.panel.dock-right .chat-composer .composer-input {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  gap: 8px;
}

/* The context row reads as a quiet caption, not a shouting micro-label. */
.panel.dock-right .chat-composer .composer-ctx-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-dim);
}

.panel.dock-right .chat-composer .composer-ctx { gap: 4px; }

/* 3–7 → ghost icon buttons: no border, no resting fill, circular, and they
   only pick up a surface on hover. Five boxes become five glyphs. */
.panel.dock-right .chat-composer .composer-iconbtn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-mid);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.panel.dock-right .chat-composer .composer-iconbtn:hover {
  background: rgba(128, 128, 128, 0.16);
  color: var(--text-hi);
}

.panel.dock-right .chat-composer .composer-iconbtn:focus-visible {
  outline: 2px solid var(--ctl-ring);
  outline-offset: 0;
}

/* 8 → send keeps its fill, since it is the one action in the card that should
   read as primary, but loses the extra height and squares off to a pill. */
.panel.dock-right .chat-composer .composer-send {
  height: 28px;
  border-radius: 999px;
}

.panel.dock-right .chat-composer .composer-foot {
  gap: 4px;
  padding-top: 2px;
}

/* The textarea now sits directly on the card.
   `background: transparent !important` is not decoration: a global
   `.uich-composer-host textarea { background: var(--panel-bg-2) !important }`
   was overriding the composer's own transparent, and since --panel-bg-2 now
   resolves to the panel colour it painted a solid rectangle inside the card —
   the third frame. Only !important beats !important here. */
.panel.dock-right .chat-composer .composer-input textarea {
  background: transparent !important;
  font-size: 14px;
  line-height: 22.75px;
  min-height: 56px;
  padding: 0;
}

/* ── the context row is a duplicate ───────────────────────────────────────────
   Pick and Draw render twice: once as labelled buttons in the .composer-ctx row
   above the field, and again as icon buttons in .composer-foot below it. Same
   two actions, two places. The foot row is the better home — it sits with the
   other tools, and it keeps the card to a single column of content.

   Hiding the row also removes the "CONTEXT" label, which was a 10px/700
   uppercase micro-heading over a field that already says what it wants in its
   placeholder.

   CAVEAT: this hides Pro markup from CSS, which is a blunt instrument. If a
   selection hint (.composer-scope-hint) is rendered inside this row rather than
   beside it, it disappears with it — worth one look in the real editor. The
   proper fix is deleting the duplicate in the Pro bundle; this is the version
   reachable from here. */
.panel.dock-right .chat-composer .composer-ctx {
  display: none;
}

/* The scope hint must survive the row above if it happens to live inside it. */
.panel.dock-right .chat-composer .composer-scope-hint {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: var(--text-dim);
}

/* ── foot row: nothing should truncate ───────────────────────────────────────
   The model dropdown was rendering as "Cl…" — clipped mid-word. The tools sit
   left, the model and send sit right, and the row wraps rather than shaving
   characters off a control. */
/* NOT flex-wrap. The foot has a `flex: 1` spacer between the tools and the
   model/send cluster; on a wrapping row that spacer expands to fill line one
   and shoves Send onto a second line, which is what made the composer look
   broken with a longer model name ("Claude Opus 4.7").
   One row, and the model name is what yields if space runs out. */
.panel.dock-right .chat-composer .composer-foot {
  flex-wrap: nowrap;
  min-width: 0;
}

.panel.dock-right .chat-composer .composer-foot select,
.panel.dock-right .chat-composer .composer-foot .combo {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 132px;
  height: 28px;
  border-radius: 999px;
  font-size: 12px;
  text-overflow: ellipsis;
}

/* Send keeps its label — the shortcut hint is what earns the extra width — but
   it no longer needs to shrink, so it stops truncating too. */
.panel.dock-right .chat-composer .composer-send {
  display: inline-flex;
  /* An ancestor rule sets flex-direction: column on the composer's children, so
     the button inherited a vertical stack even once it was a flex container —
     icon, label and shortcut on three separate rows. */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Without nowrap the icon, label and shortcut stack into three rows as soon
     as the foot gets tight — the button was rendering as a tall block rather
     than a pill. */
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: -moz-max-content;
  min-width: max-content;
  overflow: visible;
  padding: 0 12px;
  font-size: 12px;
}

/* ── send button: one icon, not two ──────────────────────────────────────────
   The button renders FOUR things: the component's own send icon, a second
   `.send-ico-plane` icon, the "Send" label, and a ⌘↵ chip.

   That is a skin bug, not a design choice. `.send-ico-plane` was added for the
   Gutenberg skin, which collapses the button to a 28px square and hides
   `.composer-send-label` — one icon, no text. Those rules are scoped to
   [data-uich-composer-skin="gutenberg"], so under brand and Elementor nothing
   hides either icon and both render either side of the label.

   Outside Gutenberg the label already says "Send", so the plane is redundant.
   Hiding the plane (rather than the component's own icon) keeps the Gutenberg
   path untouched — it is the icon that skin deliberately keeps. */
.panel.dock-right:not([data-uich-composer-skin="gutenberg"]) .composer-send .send-ico-plane {
  display: none;
}

/* Gutenberg has the mirror image of the same bug: it hides the label and sizes
   the plane, but never hid the component's own icon — so its 28px square holds
   two glyphs on top of each other. There the plane is the one to keep. */
.panel.dock-right[data-uich-composer-skin="gutenberg"] .composer-send svg:not(.send-ico-plane) {
  display: none;
}

/* …and the shortcut chip goes with the label. Gutenberg asks for a 28px square
   but the chip was still inside it, so the button measured 56px — twice its
   declared width. Icon-only means icon only. */
.panel.dock-right[data-uich-composer-skin="gutenberg"] .composer-send .kbd {
  display: none;
}

/* The shortcut is a hint, not a second button. */
.panel.dock-right .composer-send .kbd {
  margin-right: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 10px;
  opacity: 0.65;
}

/* ── composer: no inner focus ring, no inner fill ────────────────────────────
   Two things were still drawing a box inside the card.

   1. `.composer-input:focus-within` paints `box-shadow: 0 0 0 3px accent/.16`.
      Setting `border: 0` on that element earlier removed its border but did
      nothing to the shadow, so a 3px accent glow still outlined the inner
      wrapper the moment the field was focused — a second ring inside the card's
      own one.

   2. The textarea kept a fill from the global
      `.uich-composer-host textarea { background: var(--panel-bg-2) !important }`.
      That is overridden above, but the focused state re-asserted a surface, so
      it is pinned here for every state.

   Focus belongs to the card, once. Everything inside it is flat. */
.panel.dock-right .chat-composer .composer-input,
.panel.dock-right .chat-composer .composer-input:focus-within {
  box-shadow: none;
  border: 0;
  background: transparent;
}

/* Scoped to `.chat-composer textarea`, NOT `.composer-input textarea`: the
   earlier rule assumed the field is always wrapped in `.composer-input`, and if
   Pro renders it as a direct child the selector never matches — leaving the
   global `.uich-composer-host textarea { background: var(--panel-bg-2)
   !important }` to paint the dark rectangle. Matching on the composer itself
   covers both shapes. */
.panel.dock-right .chat-composer textarea,
.panel.dock-right .chat-composer textarea:focus,
.panel.dock-right .chat-composer textarea:focus-visible,
.panel.dock-right .chat-composer textarea:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}

/* Third copy of this selector in this file — see the two above. All three must
   agree or whichever lands last reinstates the grey fill. Focus lights the
   accent ring; the resting border is already at hover strength, so a border
   shift alone would be invisible. */
.panel.dock-right .chat-composer:focus-within {
  border-color: rgba(var(--accent-rgb), 0.90);
  background: var(--ctl-card);
  box-shadow: 0 0 0 3px var(--ctl-ring-soft);
}

/* ── portalled menus must stay inside the dock ────────────────────────────────
   The model picker opens past the panel's right edge, clipping its second tab.
   Its markup lives in the Pro bundle, but every portal-bearing component in the
   composer renders into `.uich-portal-root` (see components/ui/portal-context),
   which IS ours — so a width cap can be applied there even though the menu
   itself cannot be targeted directly.

   This is a guard, not the real fix. A menu anchored to a trigger near the
   panel's right edge will still be anchored there; capping the width only stops
   it running off. Genuine centring is `align="center"` plus a collision
   boundary on the Pro component — CSS cannot move a Radix-positioned popper
   without fighting its inline transform, which would break every other menu.

   UNVERIFIED: I cannot see the model picker render from here, so I cannot
   confirm it uses this portal. Worth one look in the editor. */
.uich-portal-root [role='listbox'],
.uich-portal-root [role='menu'],
.uich-portal-root [data-radix-popper-content-wrapper] > * {
  max-width: min(320px, calc(var(--uich-dock-w, 420px) - 24px));
}

/* ── the composer field is flat — beating an ID selector ─────────────────────
   Inspected in the real Elementor editor rather than guessed at. Three earlier
   attempts failed for one reason: the dark fill comes from rules carrying an
   **ID**, in the separately-enqueued panel stylesheet
   (uichemy-composer/assets/css/uichemy-composer-editor-panel.css):

     #uichemy-composer-floating-panel .uich-composer-host textarea
         background: var(--panel-bg-2) !important
     .uichemy-composer-floating-panel input…, textarea, select
         background-color: var(--uichemy-composer-input-bg) !important
         border: 1px solid var(--uichemy-composer-border-color) !important

   `!important` on both sides means specificity decides, and (1,2,1) with an ID
   beats (0,4,1) of classes however many classes are stacked. Adding the same ID
   here takes it to (1,5,1), which wins without touching that stylesheet — it
   styles every other panel input and must keep doing so.

   Scoped to `.chat-composer` so only the chat field is affected. */
#uichemy-composer-floating-panel .panel.dock-right .chat-composer textarea,
#uichemy-composer-floating-panel .panel.dock-right .chat-composer textarea:hover,
#uichemy-composer-floating-panel .panel.dock-right .chat-composer textarea:focus,
#uichemy-composer-floating-panel .panel.dock-right .chat-composer textarea:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Same treatment for the structural wrappers around the field. */
#uichemy-composer-floating-panel .panel.dock-right .chat-composer > div,
#uichemy-composer-floating-panel .panel.dock-right .chat-composer .composer-input,
#uichemy-composer-floating-panel .panel.dock-right .chat-composer .composer-input:focus-within {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* The card is defined by its BORDER, not a fill. Mirrors the class-scoped rule
   above — this copy exists only to carry the ID needed to outrank the legacy
   input stylesheet described at the top of this block, so the two must agree or
   the grey comes back through this one. */
#uichemy-composer-floating-panel .panel.dock-right .chat-composer {
  background: var(--ctl-card) !important;
  border: 1px solid var(--ctl-line) !important;
}

/* Focus keeps the SAME normal border (no accent change) and drops the glow —
   border stays visible in both states, no shadow. [ui-ux] */
#uichemy-composer-floating-panel .panel.dock-right .chat-composer:focus-within {
  background: var(--ctl-card) !important;
  border: 1px solid var(--ctl-line) !important;
  box-shadow: none !important;
}

/* ── send: icon only ─────────────────────────────────────────────────────────
   The label and the ⌘↵ chip go, leaving the paper-plane on its own — the same
   treatment the Gutenberg skin already used, now applied everywhere. A square
   button matching the other three foot icons, so the row reads as four glyphs
   with the last one filled.

   Carries #uichemy-composer-floating-panel because the panel's own stylesheet
   styles buttons through that ID; a class-only selector loses to it however
   many classes are stacked (learned the hard way on the textarea fill). */
#uichemy-composer-floating-panel .panel.dock-right .composer-send {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0 !important;
  gap: 0;
  flex: 0 0 auto;
  border-radius: 999px;
}

#uichemy-composer-floating-panel .panel.dock-right .composer-send .composer-send-label,
#uichemy-composer-floating-panel .panel.dock-right .composer-send .kbd {
  display: none !important;
}

/* The remaining glyph centres itself in the square. */
#uichemy-composer-floating-panel .panel.dock-right .composer-send svg {
  width: 14px;
  height: 14px;
  margin: 0;
}

/* ── foot row: one height, one corner ────────────────────────────────────────
   Inspected in the running editor. The three tool buttons are shadcn Buttons
   carrying Tailwind utility classes, not `.composer-iconbtn` — so they are
   targeted structurally here. They were already ghost (transparent, no border),
   which is why they looked right; the earlier `.composer-iconbtn` rules simply
   never matched anything in the chat composer.

   Two real mismatches remained:
     · `.model-dd` renders 32px tall against 28px buttons — a 4px step in the row
     · the tool buttons sit at radius 4 while send is now a circle */
#uichemy-composer-floating-panel .panel.dock-right .composer-foot > button:not(.composer-send) {
  border-radius: 999px;
}

#uichemy-composer-floating-panel .panel.dock-right .composer-foot > button:not(.composer-send):hover {
  background: rgba(128, 128, 128, 0.16);
}

/* Match the button height so the row sits on one baseline.
   Scoped to `.model-btn`, NOT `> *`. The open `.model-menu` is also a direct
   child of `.model-dd`, so the wildcard was pinning the MENU to 28px as well —
   and the menu is `overflow: hidden`, so it clipped to its tab row and nothing
   below it ever rendered. The dropdown looked broken rather than short. */
#uichemy-composer-floating-panel .panel.dock-right .composer-foot .model-dd,
#uichemy-composer-floating-panel .panel.dock-right .composer-foot .model-dd > .model-btn {
  height: 28px;
  min-height: 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RADIUS SCALE  ·  right dock only
   ───────────────────────────────────────────────────────────────────────────
   Audited in the running editor: 62 rounded shapes across the panel used FIVE
   different radii —

     6px  ×41   fields, inputs, the mode switch      ← the panel's own --radius
     4px  ×16   icon buttons, chips, a textarea shell
     2px  ×2    segmented items
     5px  ×2    the spacing box (.sb-mar / .sb-pad)
     8px  ×1    a segmented track

   6px is what the panel already declares and what 2/3 of the shapes use, so
   everything lines up on the existing two-step token scale rather than a new
   value:

     --radius     6px   every container, field, track and box
     --radius-sm  4px   small items INSIDE one of those (≤24px tall)

   The strays come from Tailwind's rounded-sm/md/lg resolving off shadcn's own
   --radius (which is 0.4rem here, so rounded-md = 4.4px, not 6px) plus a few
   hand-written 5px/8px. Mapping the utilities onto our scale fixes all of them
   in one place instead of chasing each component.

   rounded-full / 999px is deliberately untouched — pills and circles stay round.

   Self-contained: delete from this banner to the end of the file to revert.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Containers, fields, tracks, boxes. */
#uichemy-composer-floating-panel .panel.dock-right .rounded,
#uichemy-composer-floating-panel .panel.dock-right .rounded-md,
#uichemy-composer-floating-panel .panel.dock-right .rounded-lg,
#uichemy-composer-floating-panel .panel.dock-right .rounded-xl,
#uichemy-composer-floating-panel .panel.dock-right .sb-mar,
#uichemy-composer-floating-panel .panel.dock-right .sb-pad {
  border-radius: var(--radius);
}

/* Small items sitting inside a container — segmented buttons, the drag handle,
   the unit pill, spacing cells. One step tighter so they nest visually.
   NOT var(--radius-sm): measured in the editor, that token resolves to
   `calc(6px - 4px)` = 2px inside the panel, not the 4px the base file declares
   — shadcn's own --radius is re-derived there. Using it produced ten 2px cells.
   4px is written literally so the step is what it says. */
#uichemy-composer-floating-panel .panel.dock-right .rounded-sm,
#uichemy-composer-floating-panel .panel.dock-right .lin-glyph,
#uichemy-composer-floating-panel .panel.dock-right .upill-btn,
#uichemy-composer-floating-panel .panel.dock-right .seg button,
#uichemy-composer-floating-panel .panel.dock-right .sb-cell {
  border-radius: 4px;
}

/* Pills and circles keep their shape. */
#uichemy-composer-floating-panel .panel.dock-right .rounded-full,
#uichemy-composer-floating-panel .panel.dock-right .composer-foot > button {
  border-radius: 999px;
}

/* ── the Chat tab, on the same scale ────────────────────────────────────────
   The Editor tab came down to 4px / 6px, but Chat has its own set: 12px on
   .empty-mark, 7px on .empty-card-step, 2px on the copy buttons, and 18px on
   the composer card. Audited in the editor, same as above.

   Rather than force everything to 6px — which would flatten the composer card
   and the empty-state cards into looking like fields — the scale gets a third
   step for large containers:

     4px   items inside a control
     6px   controls, fields, boxes
     12px  large containers (composer card, empty-state cards)

   Each step is roughly a doubling, so the three read as deliberate levels
   rather than near-misses like 5/6/7/8. */
#uichemy-composer-floating-panel .panel.dock-right .empty-card-step,
#uichemy-composer-floating-panel .panel.dock-right .empty-card-providers {
  border-radius: var(--radius);
}

#uichemy-composer-floating-panel .panel.dock-right .agent-cmd-copy,
#uichemy-composer-floating-panel .panel.dock-right .agent-prompt-copy {
  border-radius: 4px;
}

/* Large containers. The composer card was 18px, taken from the shadcn chat
   reference, which sat oddly next to 6px fields — 12px keeps it soft without
   breaking the ladder. */
#uichemy-composer-floating-panel .panel.dock-right .chat-composer,
#uichemy-composer-floating-panel .panel.dock-right .empty-mark,
#uichemy-composer-floating-panel .panel.dock-right .empty-card {
  border-radius: 12px;
}

/* ── Option B header: tabs only ──────────────────────────────────────────────
   The panel used to open with three stacked segmented controls — measured at
   214px of chrome before any content in a 300px panel. The top bar (brand mark
   + Design/Developer switch) is collapsed in composer-app.jsx for the right
   dock, and the switch re-renders at the top of the Editor body, which is the
   only surface it governs.

   What is left is one 36px row of tool tabs, styled as a pill rather than a
   full-width strip with a 2px underline — the same shape shadcn uses for its
   own 30px tab strip, which is what we measured against. */
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  min-height: 36px;
  /* Equal on all four sides, and the same 16px the sections use — so the strip's
     left edge lines up with the field labels below it instead of sitting 4px
     inside them. Was `8px 12px`, which measured 9px top against 12px sides. */
  margin: 16px;
  padding: 3px;
  border: 0;
  /* 6px, not a 999px pill: the panel's radius scale is 6px for containers and
     4px for the items inside them, and a fully round track next to 6px fields
     was the odd one out. */
  border-radius: var(--radius);
  background: rgba(128, 128, 128, 0.14);
}

#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip .panel-tab {
  flex: 1;
  display: inline-flex;
  /* The base rule is `flex-direction: column` — that is what stacked the icon
     above the label and left the glyphs clipped at the top of the row. Setting
     alignment alone does not undo it. */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-bottom: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-mid);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* Labels only. At 26px tall a 16px glyph plus a label is cramped, and the three
   tabs read faster as words — Chat / Editor / Code are not shapes anyone scans
   for by icon. */
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip .panel-tab > svg {
  display: none;
}

#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip .panel-tab:hover {
  color: var(--text-hi);
}

/* Active tab lifts to the panel surface, so the row reads as a track with a
   raised thumb instead of an underlined strip. */
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip .panel-tab.active {
  background: var(--panel-bg);
  color: var(--text-hi);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* The old strip drew its active state with a bottom border and an ::after bar. */
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip .panel-tab::after {
  display: none;
}

/* The re-homed mode switch sits as a quiet row above the inspector. */
#uichemy-composer-floating-panel .panel.dock-right .panel-mode-row {
  display: flex;
  align-items: center;
  padding: 10px 16px 0;
}

/* ── colour field: an inset chip, not a fused block ──────────────────────────
   Ours renders the swatch as a 30px full-height cell with `border-right` acting
   as a divider, so the field reads as two boxes welded together and the swatch
   corners fight the field's own radius.

   The reference treats it as a small rounded chip floating inside one field:
   inset from every edge, its own 4px corner, no divider, hex text beside it.

   `.sw` and `.swatch-trigger` are both used (different call sites), so both are
   matched — same as the base rule. */
#uichemy-composer-floating-panel .panel.dock-right .swatch-input {
  align-items: center;
  gap: 8px;
  padding: 0 5px 0 8px;
  overflow: visible;
}

#uichemy-composer-floating-panel .panel.dock-right .swatch-input .sw,
#uichemy-composer-floating-panel .panel.dock-right .swatch-input .swatch-trigger {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-left: 0;
  border-radius: 4px;
  overflow: hidden;
  /* Tighter checker so the transparency pattern still reads at 18px — the 8px
     squares of the full-height version showed barely one tile in a chip. */
  background:
    linear-gradient(-45deg, var(--panel-bg-4) 25%, transparent 25%, transparent 75%, var(--panel-bg-4) 75%) 0 0 / 6px 6px,
    linear-gradient(-45deg, var(--panel-bg-4) 25%, transparent 25%, transparent 75%, var(--panel-bg-4) 75%) 3px 3px / 6px 6px;
}

/* The colour itself sits inside the chip, so it picks up the chip's corner. */
#uichemy-composer-floating-panel .panel.dock-right .swatch-input .sw::before,
#uichemy-composer-floating-panel .panel.dock-right .swatch-input .swatch-trigger::before {
  border-radius: 4px;
}

/* The hex no longer needs the left padding that cleared the old divider. */
#uichemy-composer-floating-panel .panel.dock-right .swatch-input > input {
  padding-right: 0;
  background: transparent;
}

/* ── chat status becomes a drawer under the composer ─────────────────────────
   Mechanism measured off ChatGPT's cowork tray (768px card, radius 28):

     tray  728 wide · inset 20px each side · radius 0 0 16 16
           bg black @ 3% · margin-top -20px · padding-top 20px · overflow clip

   The negative top margin slides the tray's box UNDER the card by exactly its
   own top padding, so the content lands below the card with no gap at all and
   the hidden top edge is clipped. That is the whole trick — not a sibling
   sitting below with the gap tuned to zero.

   Ours: `.chat2-main` is already a flex column holding
   `.chat-status → .chat2-body → .chat-composer`, so `order` moves the status
   row beneath the composer without touching the Pro markup. It carries the
   history button, the connection chip and the Widget/Page selector — the same
   class of content the reference tray holds. Scaled to our 12px card radius and
   16px side margins: 22px tray margins (6px inset) and a 12px tuck. */
#uichemy-composer-floating-panel .panel.dock-right .chat2-main > .chat2-body { order: 1; }

#uichemy-composer-floating-panel .panel.dock-right .chat2-main > .chat-composer {
  order: 2;
  margin-bottom: 0;
  /* the card must paint over the drawer's hidden top edge */
  position: relative;
  z-index: 1;
}

#uichemy-composer-floating-panel .panel.dock-right .chat2-main > .chat-status {
  order: 3;
  margin: -12px 22px 16px;
  padding: 19px 10px 7px;
  border: 0;
  border-radius: 0 0 12px 12px;
  background: rgba(128, 128, 128, 0.12);
  overflow: clip;
  position: relative;
  z-index: 0;
  gap: 8px;
  font-size: 11.5px;
}

/* One row. The base `.chat-status` is `flex-wrap: wrap` and the Widget/Page
   selector sits in a `w-full` wrapper, so it dropped to a second line and made
   the drawer twice as tall as the reference's. */
#uichemy-composer-floating-panel .panel.dock-right .chat-status {
  flex-wrap: nowrap;
}

#uichemy-composer-floating-panel .panel.dock-right .chat-status > div {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin-right: auto;
}

/* Compact the selector so it reads as one control in the drawer rather than a
   full-width segmented bar. */
#uichemy-composer-floating-panel .panel.dock-right .chat-status .rounded-lg {
  margin-right: auto;
  padding: 2px;
}

#uichemy-composer-floating-panel .panel.dock-right .chat-status .rounded-lg > button {
  height: 22px;
  padding: 0 9px;
  font-size: 11.5px;
  border-radius: 4px;
}

/* ── Editor body: switch at its natural height, inspector takes the rest ─────
   `.panel-body` is a single-cell grid (`grid-template-rows: 1fr`). The
   re-homed mode switch and the Inspector share that one cell via this flex
   column, so the switch stays 32px instead of being stretched by the 1fr row —
   which is what put 147px of dead space above the inspector. */
#uichemy-composer-floating-panel .panel.dock-right .panel-editor-stack {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

#uichemy-composer-floating-panel .panel.dock-right .panel-editor-stack > .panel-mode-row {
  flex: 0 0 auto;
}

/* The Inspector's own wrapper must be the part that scrolls. */
#uichemy-composer-floating-panel .panel.dock-right .panel-editor-stack > *:not(.panel-mode-row) {
  flex: 1 1 auto;
  min-height: 0;
}

#uichemy-composer-floating-panel .panel.dock-right .panel-mode-row {
  padding: 10px 16px 2px;
}

/* Belt and braces: the drawer must never clip its own contents, whatever ends
   up in it. The selector yields before anything gets cut. */
#uichemy-composer-floating-panel .panel.dock-right .chat-status {
  overflow-x: clip;
}

#uichemy-composer-floating-panel .panel.dock-right .chat-status .rounded-lg {
  min-width: 0;
  flex-shrink: 1;
}

/* ── connect flow, layout B ──────────────────────────────────────────────────
   Markup lives in the Pro bundle (editor/src/composer-chat.jsx, AgentPairing);
   the styles live here because every other chat class does.

   Replaces two expanded setup blocks and an "or" divider with one action and
   one status line. Measured before: 898px of content in a ~600px panel, the
   command clipped to 147px, and no feedback that anything was happening. */

/* The command wraps in full — it carries a password, so it has to be readable
   before anyone pastes it. */
#uichemy-composer-floating-panel .panel.dock-right .agent-cmd {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px 8px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--ctl-line);
  background: rgba(128, 128, 128, 0.10);
}

#uichemy-composer-floating-panel .panel.dock-right .agent-cmd code {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-hi);
  white-space: pre-wrap;
  word-break: break-all;
}

#uichemy-composer-floating-panel .panel.dock-right .agent-cmd-secret {
  color: var(--text-dim);
}

#uichemy-composer-floating-panel .panel.dock-right .agent-cmd-reveal {
  align-self: flex-start;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--text-dim);
  font: inherit;
  font-size: 11.5px;
  text-decoration: underline;
}

#uichemy-composer-floating-panel .panel.dock-right .agent-cmd-reveal:hover {
  color: var(--text-mid);
}

/* One status line, swapping between hint and live wait. */
#uichemy-composer-floating-panel .panel.dock-right .agent-pairing-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

#uichemy-composer-floating-panel .panel.dock-right .agent-pairing-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius);
  background: rgba(128, 128, 128, 0.07);
  font-size: 12.5px;
  color: var(--text-mid);
}

#uichemy-composer-floating-panel .panel.dock-right .agent-pairing-pulse {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgb(var(--accent-rgb));
  animation: uich-pair-pulse 1.4s ease-in-out infinite;
}

@keyframes uich-pair-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* The assistant route and the requirement drop to the bottom as quiet text. */
#uichemy-composer-floating-panel .panel.dock-right .agent-pairing-foot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-line);
}

#uichemy-composer-floating-panel .panel.dock-right .agent-pairing-alt {
  align-self: flex-start;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--text-mid);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
}

#uichemy-composer-floating-panel .panel.dock-right .agent-pairing-alt:hover {
  color: var(--text-hi);
}

#uichemy-composer-floating-panel .panel.dock-right .agent-pairing-req {
  font-size: 11px;
  color: var(--text-dim);
}

/* Prefers-reduced-motion: the pulse is decorative, so it stops. */
@media (prefers-reduced-motion: reduce) {
  #uichemy-composer-floating-panel .panel.dock-right .agent-pairing-pulse {
    animation: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ONE TABBING LANGUAGE
   ───────────────────────────────────────────────────────────────────────────
   Every segmented control in the panel — the Chat/Editor/Code strip, the
   Design/Developer switch, the state and breakpoint tabs, the inline .seg
   toggles, the section-tab chips, the Pro bundle's Widget/Page pill — now reads
   the same way: a GREY track with a lighter GREY active chip sitting on it.

   The three languages this replaces:
     · Chat/Editor/Code   grey track (rgba(128,128,128,.14)), near-black active
                          tab (--panel-bg). Inverted: the ACTIVE tab was the
                          darkest thing in the row, so the row read as a hole
                          with two lit shoulders. This is the one that prompted
                          the change.
     · .seg / .state-tabs / .responsive-tabs / .field.pf .bg-muted
                          light-wash track (--panel-bg-2) with a lighter chip
                          (--panel-bg-4) — right direction, wrong ground: the
                          track sat ABOVE the panel instead of below it.
     · .mode-seg           active half filled solid --foreground with inverted
                          ink. A different figure/ground from both of the above.

   Colours come from --seg-track / --seg-track-line / --seg-thumb /
   --seg-thumb-hover / --seg-thumb-shadow (composer.css, dark in :root and light
   in the theme block below it), so a skin can re-point the language in one place.

   The hairline is an INSET box-shadow, never a border: several of these tracks
   already have a border contributing to their layout, and swapping its colour
   keeps the geometry identical — adding a border where there wasn't one would
   move every tab strip 2px.

   Geometry, radii, sizes and type are untouched. This is colour only.
   Self-contained: delete from this banner to the end of the file to revert.
   Last import in index.jsx, so it needs no !important except where a Tailwind
   utility class is the thing being overridden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · tracks ───────────────────────────────────────────────────────────── */
.panel-tabs-strip,
/* `.panel.dock-right .panel-tabs { background: var(--panel-bg-2) }` earlier in
   this file is 0,3,0 and outranks a bare `.panel-tabs-strip`, so the dock needs
   its own copy at matching weight (later in source, so it wins) as well as the
   ID-carrying one that outranks the Option-B header block below it. */
.panel.dock-right .panel-tabs-strip,
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip,
.state-tabs,
.responsive-tabs,
.mode-seg,
.seg,
.iv2 .iv2-tablist,
.field.pf .bg-muted:has(button),
/* Pro bundle: SEG_WRAP_CLS is `inline-flex … rounded-lg bg-muted p-0.5`, and the
   Widget/Page pill is the one that reaches the user. `:has(> button)` keeps this
   off every other bg-muted surface — chat bubbles (.msg2.ai) are bg-muted too. */
.uich-tw .bg-muted.rounded-lg:has(> button) {
  background: var(--seg-track);
  background-color: var(--seg-track);
  border-color: transparent;
  border-radius: var(--seg-radius);
  box-shadow: inset 0 0 0 1px var(--seg-track-line);
}

/* ── 2 · active chip ──────────────────────────────────────────────────────── */
.panel-tab.active,
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip .panel-tab.active,
[data-uich-composer-skin="gutenberg"] .panel.dock-right .panel-tab.active,
.state-tabs button.on,
.responsive-tabs button.on,
.mode-seg-btn.on,
.mode-seg-btn.on:hover,
[data-uich-composer-skin="gutenberg"] .mode-seg-btn.on,
[data-uich-composer-skin="gutenberg"] .mode-seg-btn.on:hover,
.seg button.on,
.stab-tab.on,
.ed-pane-tools .stab-tab.on,
.iv2 .iv2-tab[data-state='active'],
.field.pf .bg-muted:has(button) button.bg-background,
.uich-tw .bg-muted.rounded-lg:has(> button) > button.bg-background {
  background: var(--seg-thumb);
  background-color: var(--seg-thumb);
  color: var(--text-hi);
  border-color: transparent;
  border-radius: var(--seg-radius-inner);
  /* Hairline FIRST, drop shadow second: the inset ring draws the chip's edge and
     the shadow only separates it from the track. One box-shadow list, because a
     border would change the chip's box and shift the label by a pixel. */
  box-shadow: inset 0 0 0 1px var(--seg-thumb-line), var(--seg-thumb-shadow);
}

/* ── 3 · hover on the inactive segments ───────────────────────────────────── */
/* A wash at a third of the chip's weight: enough to answer the pointer, not
   enough to be mistaken for the active tab. */
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip .panel-tab:not(.active):hover,
.panel-tabs-strip .panel-tab:not(.active):hover,
.state-tabs button:not(.on):hover,
.responsive-tabs button:not(.on):hover,
.mode-seg-btn:not(.on):hover,
[data-uich-composer-skin="gutenberg"] .mode-seg-btn:not(.on):hover,
.seg button:not(.on):hover,
.stab-tab:not(.on):hover,
.iv2 .iv2-tab:not([data-state='active']):hover,
.uich-tw .bg-muted.rounded-lg:has(> button) > button:not(.bg-background):hover {
  background: var(--seg-thumb-hover);
  background-color: var(--seg-thumb-hover);
  color: var(--text-hi);
  border-radius: var(--seg-radius-inner);
}

/* ── 4 · section-tab chips ────────────────────────────────────────────────── */
/* These are loose chips rather than one track, so they have no track to sit in —
   they get the same ink instead: transparent at rest, the wash on hover, the
   chip when on. Their own border would draw a box round each one and undo the
   effect, so it goes transparent. The `padding` shift on hover/on is theirs and
   is left alone. */
.stab-tab {
  background: transparent;
  border-color: transparent;
}

/* ── 5 · .mode-seg loses its inverted ink ─────────────────────────────────── */
/* The active half used to be a solid --foreground block with --background text.
   With the chip treatment the label is normal panel ink like every other active
   tab, and the track's own inset ring replaces the one it drew itself. */
.mode-seg {
  overflow: hidden;
}

/* ── 6 · concentric radii ─────────────────────────────────────────────────── */
/* Every segment takes the inner radius whether it is active or not. Without
   this only the active chip is rounded, so the moment you switch tabs the
   corner shape jumps from square to round — visible as a flicker on the tab you
   just left. The track's own radius is set alongside its fill in 1 · above,
   except for these families whose radius is declared on a different rule. */
.panel-tabs-strip .panel-tab,
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip .panel-tab,
.state-tabs button,
.responsive-tabs button,
.mode-seg-btn,
.seg button,
.stab-tab,
.iv2 .iv2-tab,
.uich-tw .bg-muted.rounded-lg:has(> button) > button {
  border-radius: var(--seg-radius-inner);
}

.panel-tabs-strip,
.panel.dock-right .panel-tabs-strip,
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip,
.state-tabs,
.responsive-tabs,
.mode-seg,
.seg,
.iv2 .iv2-tablist,
.field.pf .bg-muted:has(button) {
  border-radius: var(--seg-radius);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODEL MENU  ·  keep it inside the panel
   ───────────────────────────────────────────────────────────────────────────
   `.model-menu` is `position: absolute` against `.model-dd`, i.e. against the
   small "Claude Op…" BUTTON in the prompt footer. With a fixed 260px width it
   hangs off whichever side that button happens to sit near, and the panel clips
   the overhang — in the right dock that means the second tab ("WP Connectors")
   is cut in half.

   The Gutenberg skin already fixed this, and the fix is skin-independent: take
   the button out of the positioning chain so the menu measures against
   `.chat-composer` — the prompt box, which by definition spans the panel — and
   pin it to both of that box's edges instead of giving it a width. It then fits
   at any panel width, and still opens directly above the prompt box.

   Note the `.uich-portal-root` width cap earlier in this file was never reaching
   this menu. Its comment guessed the model picker was portalled; it is not, it
   renders inline inside `.model-dd`. That cap still does real work for the menus
   that ARE portalled (the scope dropdown), so it stays — it just was never the
   fix for this one.

   `.model-dd.full` and `.model-dd.drop-down` are matched too. `.full` set an
   explicit `width: 100%` at 0,3,0, which outranks a bare `.model-menu`, and
   `.drop-down` flips the menu below the box — both need to survive the switch
   from width-based to edge-pinned sizing.
   ═══════════════════════════════════════════════════════════════════════════ */
.model-dd,
.model-dd.full {
  position: static;
}

.model-menu,
.model-dd.full .model-menu {
  right: 0;
  left: 0;
  width: auto;
  max-width: none;
  bottom: calc(100% + 6px);
}

.model-dd.drop-down .model-menu {
  top: calc(100% + 6px);
  bottom: auto;
}

/* The button keeps its own stacking context so the menu's shadow lands over the
   prompt box rather than under the footer controls. */
.model-menu {
  z-index: 90;
}

/* ---- Design / Developer switcher: bar rides the panel's own separator ------
   The top bar carries `padding: 12px` and its own full-width border-bottom, and
   the TabsList drew a SECOND, shorter rule of its own. The result was a short
   underline floating 12px above the real separator, with bare space beside it.
   Drop the list's rule, then stretch the list through the bar's bottom padding
   so its edge meets the bar's border — the sliding bar (bottom:-1px) then lands
   exactly on that separator and runs the full width of the row. */
.panel.dock-right .tab-tools .mode-switch {
  flex: 1 1 auto;
  width: 100%;
  border-bottom: 0;
  margin-bottom: -12px;
  padding-bottom: 12px;
  height: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STOP  ·  icon only, same circle as send
   ───────────────────────────────────────────────────────────────────────────
   Stop replaces Send in the same slot while the agent is working, so it has to
   be the same shape. It was a labelled pill ("■ Stop"), which meant the footer
   row changed width the moment a message was sent, and put a second piece of
   text in a row that is otherwise four glyphs.

   Right dock only, exactly like the send treatment above it — the bottom dock
   keeps both buttons labelled, so the pair stays consistent in each layout.

   Carries #uichemy-composer-floating-panel for the same reason send does: the
   panel's own stylesheet styles buttons through that ID, and a class-only
   selector loses to it however many classes are stacked.
   ═══════════════════════════════════════════════════════════════════════════ */
#uichemy-composer-floating-panel .panel.dock-right .composer-stop {
  width: 28px;
  min-width: 28px;
  height: 28px;
  /* !important because the button carries Tailwind's `px-2.5`. */
  padding: 0 !important;
  gap: 0;
  flex: 0 0 auto;
  border-radius: 999px;
}

#uichemy-composer-floating-panel .panel.dock-right .composer-stop .composer-stop-label {
  display: none !important;
}

/* The red hover has to survive the generic foot-button hover
   (`.composer-foot > button:not(.composer-send):hover`, grey). That one is
   (1,5,1) — the extra point is its `button` ELEMENT — so a class-only match at
   (1,5,0) loses no matter that this block sits later in the file. Measured, not
   assumed: with `.composer-stop:hover` the border and text went red and the
   background stayed grey, because background was the only property the two
   rules both declared. Naming `button` here levels it at (1,5,1), and source
   order then decides. */
#uichemy-composer-floating-panel .panel.dock-right .composer-foot > button.composer-stop:hover {
  background: rgba(220, 60, 60, 0.22);
  border-color: rgba(220, 60, 60, 0.55);
  color: #f06060;
}

/* A touch larger with no label beside it to balance against. */
#uichemy-composer-floating-panel .panel.dock-right .composer-stop .stop-icon {
  width: 9px;
  height: 9px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDING PILL  ·  tool tab strip (Chat / Editor / Code)
   ───────────────────────────────────────────────────────────────────────────
   The active state used to be a background on the tab itself, so switching tabs
   made the chip vanish in one cell and appear in another — two things blinking
   rather than one thing moving.

   The pill itself comes from `.seg-slide` (composer.css), the same travelling
   chip every other segmented control in the composer uses, measured by
   useSlidingSeg. All that is left here is what the strip needs on top of it:
   the tabs stop drawing chips of their own, and the pill's corner is squared up
   with the tabs'. Everything else — fill, hairline, shadow, easing — is shared,
   so the strip cannot drift from the rest of the panel.

   Self-contained: delete from this banner to the end of the file to revert, and
   drop `seg-slide` + the ref + the data-state props in composer-app.jsx.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The chip moved to the track, so the tab keeps only its ink. Without this the
   old per-tab background would sit on top of the pill as a second, stationary
   chip. */
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip .panel-tab.active {
  background: transparent;
  box-shadow: none;
}

/* The tabs are `flex: 1`, but `min-width: auto` still stops one shrinking below
   its own label — so a Chat tab carrying a PRO badge grows and the others
   shrink. The pill hugs whatever it measures either way, but the tabs should
   stay even. */
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip .panel-tab {
  min-width: 0;
}

/* The strip's items are 4px (set with the rest of the radius scale above), so
   the pill matches them rather than taking the wider --seg-radius-inner the
   Tailwind-classed segments use. */
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip::before {
  border-radius: 4px;
}

/* The inspector head is [mode switch][Attributes][Mark as]. A dedicated
   .head-spacer used to push the two buttons right; letting the tab row grow
   does the same job with one less element, and has the side benefit of running
   the tabs' underline rule across the whole row instead of stopping it in a
   stub after "Developer". */
.panel.dock-right .inspector-head .mode-switch {
  /* The DS `line` TabsList ships as `inline-flex … justify-start`, so it
     shrink-wraps to the two labels and pins them left — which left the tabs no
     spare width to divide however hard `[role=tab]` tried to grow. Override the
     display so it fills its row, and pin width:100% because the list's parent
     (Radix's Tabs div) is a plain block, not a flex container, so `flex:1 1 auto`
     alone never stretched it. */
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* Design / Developer split the full row evenly. `.inspector-head__tabs` is a
   100%-wide row of its own, and the list above fills it — but the two line tabs
   still hugged their labels on the left, leaving the rest of the row empty. Let
   each trigger grow to an equal share and centre its label, so the pair spans
   the whole width and each underline sits under its own half. Scoped to the
   inspector head only: the `.tab-tools` variant is deliberately content-sized
   and left-aligned (see the note near the top of this file). */
.panel.dock-right .inspector-head .mode-switch [role='tab'] {
  flex: 1 1 0;
  justify-content: center;
}

/* Right-dock actions row: the tag / Mark as controls, re-homed from the head to
   sit BELOW the class strip so the panel reads classes-first. The element's tag
   is pinned LEFT and Mark as pushed to the right edge — the tag is what the row
   is primarily about, so it leads and the dynamic-construct control trails.
   Closed off with the same hairline the class strip carries so the two read as
   one "what is this element" group above the section list. */
.panel.dock-right .insp-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--panel-line);
}
.panel.dock-right .insp-actions-row .insp-head-tag { order: 1; margin-left: auto; }
.panel.dock-right .insp-actions-row .insp-head-mark { order: 2; }

/* ── section header: more air above the label ────────────────────────────────
   `.acc-head` is set three times in this file, all at 0,3,0 — 11px, then 13px,
   then 12px — so the last one wins and the header sat at 12px top and bottom.
   This lifts the top to 18px, which reads as space between a section's label and
   the divider closing the section above it.

   padding-TOP only, deliberately: the shorthand copies above still own the other
   three sides, so the horizontal gutter stays on --pf-sec-pad-x and the bottom
   stays at 12px, keeping the label closer to its own fields than to the section
   before it. Applies in the Gutenberg skin too — its own header rule sets only
   padding-left/right, on purpose, and so does not reset this. */
.panel.dock-right .acc-head {
  padding-top: 18px;
}

/* ── inspector head: no bottom padding ───────────────────────────────────────
   The head is the slim strip carrying the Design/Developer switch. Its base rule
   in composer.css is `padding: 7px 14px`; dropping the bottom to 0 pulls the
   divider up against the switch instead of leaving a 7px shelf under it.

   padding-BOTTOM only, so the base rule keeps owning the top and the 14px
   horizontal gutter. Scoped to the right dock, where this strip actually renders
   the switch — the bottom dock's head is a Developer-only actions row and is
   left as it was. */
.panel.dock-right .inspector-head {
  padding-bottom: 0;
  /* Grey divider gone too. The head now runs straight into the first section,
     and the only thing separating them is that section's own 18px top padding —
     which is enough, and is why the line was reading as a second separator
     stacked on top of real space. */
  border-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MINIMAL  ·  surfaces, not boxes
   ───────────────────────────────────────────────────────────────────────────
   Standing direction: the panel is minimal in BOTH themes — controls are read
   from their fill and from the space around them, not from a 1px line.

   Measured before writing this (a light + dark panel rendered against the built
   stylesheet, then every element with a visible computed border enumerated).
   Six sources, structurally identical in the two themes:

     .acc            ×4  section dividers
     textarea        ×1  the Content field shell, all four sides
     .chat-composer  ×1  the prompt box, all four sides
     .model-btn      ×1  the model picker, all four sides
     .chat-status    ×1  bottom
     .panel          ×1  the dock's own outer edge

   Only the last of those is a structural boundary — it separates the panel from
   the host editor's chrome. It keeps a line, softened to --min-line. Every other
   one becomes a fill or nothing.

   Why light was the trigger: all of these drew ONE token, #e8e8e8 in light and
   #27272a in dark. On near-black that is invisible and the panel looked clean;
   on white the same line is a hard rule, so the light panel read as a stack of
   boxes. The replacements are neutral-grey alphas, which resolve correctly on
   either ground.

   Self-contained: delete from this banner to the end of the file to revert.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · section dividers go. The header already carries 18px of space above its
       label; a rule on top of that space is a second separator for one gap. */
.panel.dock-right .acc {
  border-bottom: 0;
}

/* 2 · the Content field: a soft-filled well, no outline. `border-color`, not
       `border: 0`, so the 1px stays in the box model and the field does not
       shift by a pixel. Beats Tailwind's `.uich-tw .border-input` (0,2,0). */
#uichemy-composer-floating-panel .panel.dock-right .text-row-area > textarea {
  border-color: transparent !important;
  background-color: var(--min-fill) !important;
  box-shadow: none !important;
}

#uichemy-composer-floating-panel .panel.dock-right .text-row-area > textarea:hover {
  background-color: var(--min-fill-hover) !important;
}

/* 3 · the model picker button, same treatment as the field it sits beside. */
#uichemy-composer-floating-panel .panel.dock-right .model-btn {
  border-color: transparent !important;
  background-color: var(--min-fill) !important;
  box-shadow: none !important;
}

#uichemy-composer-floating-panel .panel.dock-right .model-btn:hover {
  background-color: var(--min-fill-hover) !important;
}

/* 4 · the prompt box is the ONE exception to this block — it keeps its
       `--ctl-card` fill AND its `--ctl-line` border, in both states. It was
       stripped like everything else at first, which was wrong: this is the
       panel's primary input, and it is the one surface where the outline is the
       point rather than clutter. Nothing to declare here — the pre-existing
       resting and :focus-within rules further up already state that look, and
       they already agree with each other, so both states match by default. */

/* 5 · the status strip under the composer. The Widget/Page pill inside it is a
       filled track and defines itself; the rule under it separated nothing. */
.chat-status {
  border-bottom: 0;
}

/* 6 · the one line that stays: the dock's own edge against the host editor.
       Softened from the shared panel-line token to --min-line. */
.panel.dock-right {
  border-color: var(--min-line);
}

/* ── tool tab strip: height comes from its content ───────────────────────────
   It was pinned at `height: 36px; min-height: 36px` while its own contents
   measure 32px — a 26px tab inside 3px of track padding. So the track carried
   4px of dead space that no value in the strip accounted for, and any change to
   the tab height (or a skin with different control sizes) would have been
   swallowed by the pin instead of resizing the row.

   `auto` / `0` rather than deleting the declarations, because two lower rules
   would otherwise take over: the base `.panel-tabs-strip` at `min-height: 46px`
   (composer.css) and `.panel.dock-right .panel-tabs` at `min-height: 58px`,
   which the strip also matches — it carries both classes. This selector keeps
   the ID so it outranks both.

   The sliding pill is unaffected: it is sized from the custom properties
   useSlidingSeg measures off the active ITEM, and centred with `top: 50%`, so it
   never referenced the track's height. */
#uichemy-composer-floating-panel .panel.dock-right .panel-tabs-strip {
  height: auto;
  min-height: 0;
}