/* Diagram Studio (extension package). The modal chrome (backdrop, frame,
   header, footer, close, buttons, selects, scrollbars) comes from the
   editor's own modal design (the dsm family) - the dialog mounts inside
   #wpie-root exactly for that. Only studio-specific layout lives here,
   prefixed wpiedg- so sibling studios never collide. Every interactive
   rule (button / input / textarea / select) carries #wpie-root so it wins
   against the editor reset ("#wpie-root button{background:none;border:0}").
   The right dock uses icon-headed cards, matching the 3D-studio CI. */

.wpiedg-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min( 1360px, 97vw );
	height: min( 860px, 95vh );
}

.wpiedg-body {
	display: flex;
	flex: 1;
	min-height: 0;
}

/* -------------------------------- columns -------------------------------- */

.wpiedg-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 310px;
	min-width: 310px;
	padding: 12px;
	overflow-y: auto;
}

.wpiedg-left {
	border-right: 1px solid var( --ed-border, #2a2f36 );
}

.wpiedg-right {
	border-left: 1px solid var( --ed-border, #2a2f36 );
}

.wpiedg-center {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 12px;
	gap: 8px;
}

.wpiedg-stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background:
		repeating-conic-gradient(
			var( --ed-panel-alt, rgba( 255, 255, 255, 0.03 ) ) 0% 25%,
			transparent 0% 50% )
		50% / 22px 22px;
}

.wpiedg-canvas {
	max-width: 100%;
	max-height: 100%;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.28 );
	touch-action: none;
}

.wpiedg-canvas.is-doc {
	background: transparent;
	box-shadow: none;
}

.wpiedg-status {
	font-size: 12px;
	color: var( --ed-text-muted, #96a0af );
	text-align: center;
}

/* Overlay buttons on the preview stage. */
#wpie-root .wpiedg-docbtn,
#wpie-root .wpiedg-resetbtn {
	position: absolute;
	top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var( --ed-text, #e7ebf2 );
	background: var( --ed-panel, rgba( 20, 24, 32, 0.86 ) );
	border: 1px solid var( --ed-border, #333a44 );
	cursor: pointer;
	backdrop-filter: blur( 4px );
}

#wpie-root .wpiedg-docbtn {
	right: 10px;
}

#wpie-root .wpiedg-resetbtn {
	left: 10px;
}

#wpie-root .wpiedg-docbtn:hover,
#wpie-root .wpiedg-resetbtn:hover {
	border-color: var( --accent, #3b66ff );
}

#wpie-root .wpiedg-docbtn[aria-pressed='true'] {
	color: #fff;
	background: var( --accent, #3b66ff );
	border-color: var( --accent, #3b66ff );
}

#wpie-root .wpiedg-docbtn svg,
#wpie-root .wpiedg-resetbtn svg {
	width: 14px;
	height: 14px;
}

/* Zoom cluster, bottom-right of the stage. */
#wpie-root .wpiedg-zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var( --ed-border, #333a44 );
	border-radius: 8px;
	overflow: hidden;
	background: var( --ed-panel, rgba( 20, 24, 32, 0.86 ) );
	backdrop-filter: blur( 4px );
}

#wpie-root .wpiedg-zoombtn,
#wpie-root .wpiedg-zoomlabel {
	appearance: none;
	border: 0;
	background: transparent;
	color: var( --ed-text, #e7ebf2 );
	font-size: 12px;
	font-weight: 600;
	padding: 5px 9px;
	cursor: pointer;
}

#wpie-root .wpiedg-zoomlabel {
	min-width: 46px;
	text-align: center;
	color: var( --ed-text-muted, #9aa1ab );
	border-left: 1px solid var( --ed-border, #333a44 );
	border-right: 1px solid var( --ed-border, #333a44 );
}

#wpie-root .wpiedg-zoombtn:hover,
#wpie-root .wpiedg-zoomlabel:hover {
	color: var( --accent, #3b66ff );
}

/* Connector click menu floating over the canvas. */
.wpiedg-connmenu {
	position: absolute;
	z-index: 7;
	width: 178px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	border-radius: 10px;
	background: var( --ed-panel, #1c2230 );
	border: 1px solid var( --ed-border, #333a44 );
	box-shadow: 0 14px 40px rgba( 0, 0, 0, 0.5 );
}

.wpiedg-connmenu-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --ed-text-dim, #b9c0cc );
}

.wpiedg-connmenu-row {
	display: flex;
	gap: 4px;
}

#wpie-root .wpiedg-connmenu-btn {
	flex: 1;
	padding: 5px 4px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var( --ed-text, #e7ebf2 );
	background: var( --ed-panel-alt, rgba( 255, 255, 255, 0.05 ) );
	border: 1px solid var( --ed-border, #333a44 );
	cursor: pointer;
}

#wpie-root .wpiedg-connmenu-btn.is-active {
	color: #fff;
	background: var( --accent, #3b66ff );
	border-color: var( --accent, #3b66ff );
}

.wpiedg-connmenu-foot {
	display: flex;
	justify-content: space-between;
	margin-top: 2px;
}

#wpie-root .wpiedg-connmenu-link {
	padding: 3px 6px;
	font-size: 12px;
	font-weight: 600;
	color: var( --ed-text-dim, #b9c0cc );
	background: transparent;
	border: 0;
	cursor: pointer;
}

#wpie-root .wpiedg-connmenu-link:hover {
	color: var( --accent, #3b66ff );
}

/* Node colour menu (shares the connmenu shell). */
.wpiedg-nodemenu-swatches {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 5px;
}

#wpie-root .wpiedg-nodemenu-swatch {
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	border-radius: 6px;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	cursor: pointer;
}

#wpie-root .wpiedg-nodemenu-swatch.is-active {
	outline: 2px solid var( --accent, #3b66ff );
	outline-offset: 1px;
}

.wpiedg-nodemenu-custom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* Inline label editor floating over the canvas. */
#wpie-root .wpiedg-edit {
	position: absolute;
	z-index: 6;
	padding: 2px 6px;
	font-size: 14px;
	font-weight: 600;
	color: #10131a;
	background: #fff;
	border: 2px solid var( --accent, #3b66ff );
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.35 );
	outline: none;
}

/* ------------------------------ card sections ---------------------------- */

.wpiedg-card {
	flex: none;
	overflow: hidden;
	background: var( --ed-panel-alt, rgba( 255, 255, 255, 0.03 ) );
	border: 1px solid var( --ed-border, #333a44 );
	border-radius: 10px;
}

.wpiedg-card-head {
	display: flex;
	gap: 9px;
	align-items: center;
	padding: 11px 13px 5px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var( --ed-text-dim, #b9c0cc );
	text-transform: uppercase;
}

.wpiedg-card-head svg {
	flex: none;
	opacity: 0.85;
}

.wpiedg-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 8px 13px 13px;
}

/* --------------------------------- chips --------------------------------- */

.wpiedg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

#wpie-root .wpiedg-chip {
	padding: 7px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var( --ed-text, #e7ebf2 );
	background: var( --ed-panel-alt, rgba( 255, 255, 255, 0.05 ) );
	border: 1px solid var( --ed-border, #333a44 );
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
}

#wpie-root .wpiedg-chip.small {
	padding: 5px 10px;
	font-size: 12px;
}

#wpie-root .wpiedg-chip:hover {
	background: var( --ed-panel, rgba( 255, 255, 255, 0.09 ) );
}

#wpie-root .wpiedg-chip.is-active {
	color: #fff;
	background: var( --accent, #3b66ff );
	border-color: var( --accent, #3b66ff );
}

/* --------------------------------- fields -------------------------------- */

.wpiedg-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.wpiedg-field-label {
	font-size: 12px;
	color: var( --ed-text-dim, #b9c0cc );
}

#wpie-root .dsm-input.small,
#wpie-root .dsm-select.small {
	padding: 6px 8px;
	font-size: 12px;
}

.wpiedg-buckets {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

/* ---------------------------- mode cards (v1.13) -------------------------- */

.wpiedg-modecards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding-bottom: 8px;
	border-bottom: 1px solid var( --ed-border, #2a2f36 );
}

#wpie-root .wpiedg-modecard {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 600;
	color: var( --ed-text-dim, #b9c0cc );
	background: var( --ed-panel-alt, rgba( 255, 255, 255, 0.04 ) );
	border: 1px solid var( --ed-border, #2a2f36 );
	cursor: pointer;
	min-width: 0;
}

#wpie-root .wpiedg-modecard span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#wpie-root .wpiedg-modecard svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

#wpie-root .wpiedg-modecard:hover {
	color: var( --ed-text, #e7ebf2 );
}

#wpie-root .wpiedg-modecard.is-active {
	color: var( --ed-text, #e7ebf2 );
	border-color: var( --accent, #3b66ff );
	background: var( --ed-panel, rgba( 59, 102, 255, 0.08 ) );
}

.wpiedg-inputpanel {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* --------------------------------- rows ---------------------------------- */

.wpiedg-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wpiedg-row {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	padding: 8px;
	border-radius: 9px;
	background: var( --ed-panel, rgba( 255, 255, 255, 0.03 ) );
	border: 1px solid var( --ed-border, #2a2f36 );
}

.wpiedg-row-main {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
	min-width: 0;
}

#wpie-root .wpiedg-row-icon {
	flex: none;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	color: var( --ed-text, #e7ebf2 );
	background: var( --ed-panel-alt, rgba( 255, 255, 255, 0.06 ) );
	border: 1px solid var( --ed-border, #333a44 );
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
}

#wpie-root .wpiedg-row-icon:hover {
	border-color: var( --accent, #3b66ff );
}

#wpie-root .wpiedg-row-icon svg {
	width: 18px;
	height: 18px;
}

/* Icon picker popover. */
.wpiedg-iconpop {
	position: absolute;
	z-index: 9;
	width: 264px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	border-radius: 10px;
	background: var( --ed-panel, #1c2230 );
	border: 1px solid var( --ed-border, #333a44 );
	box-shadow: 0 16px 46px rgba( 0, 0, 0, 0.5 );
}

.wpiedg-icontabs {
	display: flex;
	gap: 4px;
}

.wpiedg-icongrid {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 4px;
	max-height: 240px;
	overflow-y: auto;
}

#wpie-root .wpiedg-emojicell {
	font-size: 20px;
	line-height: 1;
}

#wpie-root .wpiedg-iconcell {
	aspect-ratio: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	color: var( --ed-text, #e7ebf2 );
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
}

#wpie-root .wpiedg-iconcell:hover {
	background: var( --ed-panel-alt, rgba( 255, 255, 255, 0.08 ) );
}

#wpie-root .wpiedg-iconcell.is-active {
	border-color: var( --accent, #3b66ff );
	color: var( --accent, #3b66ff );
}

#wpie-root .wpiedg-iconnone {
	font-size: 15px;
	font-weight: 700;
	color: var( --ed-text-dim, #b9c0cc );
}

.wpiedg-row-tools {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

#wpie-root .wpiedg-icon {
	width: 26px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	color: var( --ed-text-dim, #b9c0cc );
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
}

#wpie-root .wpiedg-icon:hover {
	background: var( --ed-panel, rgba( 255, 255, 255, 0.08 ) );
	color: var( --ed-text, #e7ebf2 );
}

#wpie-root .wpiedg-icon.danger:hover {
	color: #ff6b6b;
}

#wpie-root .wpiedg-icon:disabled {
	opacity: 0.35;
	cursor: default;
}

#wpie-root .wpiedg-icon svg {
	width: 15px;
	height: 15px;
}

#wpie-root .wpiedg-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	color: var( --ed-text, #e7ebf2 );
	background: var( --ed-panel-alt, rgba( 255, 255, 255, 0.05 ) );
	border: 1px dashed var( --ed-border, #444b57 );
	cursor: pointer;
}

#wpie-root .wpiedg-add:hover {
	border-color: var( --accent, #3b66ff );
	color: var( --accent, #3b66ff );
}

#wpie-root .wpiedg-add:disabled {
	opacity: 0.4;
	cursor: default;
}

#wpie-root .wpiedg-add svg {
	width: 15px;
	height: 15px;
}

.wpiedg-hint {
	font-size: 11.5px;
	line-height: 1.45;
	color: var( --ed-text-muted, #96a0af );
}

#wpie-root .wpiedg-outline {
	width: 100%;
	resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
	line-height: 1.5;
}

/* ------------------------------- AI derive ------------------------------- */

.wpiedg-derive-back {
	position: absolute;
	inset: 0;
	background: rgba( 10, 12, 16, 0.55 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 8;
	border-radius: inherit;
}

.wpiedg-derive {
	width: min( 560px, 90% );
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border-radius: 12px;
	background: var( --ed-panel, #1c2230 );
	border: 1px solid var( --ed-border, #333a44 );
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.5 );
}

.wpiedg-derive-title {
	font-size: 15px;
	font-weight: 700;
	color: var( --ed-text, #e7ebf2 );
}

.wpiedg-derive-foot {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wpiedg-derive-mode {
	font-size: 11.5px;
	color: var( --ed-text-muted, #96a0af );
	margin-right: auto;
}

/* -------------------------------- presets -------------------------------- */

.wpiedg-presets {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

#wpie-root .wpiedg-preset {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 5px;
	border-radius: 9px;
	background: var( --ed-panel, rgba( 255, 255, 255, 0.04 ) );
	border: 1.5px solid var( --ed-border, #333a44 );
	cursor: pointer;
	transition: border-color 0.12s;
}

#wpie-root .wpiedg-preset:hover {
	border-color: var( --ed-text-dim, #8b94a3 );
}

#wpie-root .wpiedg-preset.is-active {
	border-color: var( --accent, #3b66ff );
}

.wpiedg-preset-cv {
	width: 100%;
	height: auto;
	border-radius: 5px;
	display: block;
}

.wpiedg-preset-name {
	font-size: 11px;
	font-weight: 600;
	color: var( --ed-text-dim, #b9c0cc );
	text-align: center;
}

/* -------------------------------- inline --------------------------------- */

.wpiedg-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.wpiedg-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var( --ed-text, #e7ebf2 );
	cursor: pointer;
}

#wpie-root .wpiedg-check input {
	width: 16px;
	height: 16px;
	accent-color: var( --accent, #3b66ff );
	cursor: pointer;
}

.wpiedg-colorbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* -------------------------------- sliders -------------------------------- */

.wpiedg-slider {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wpiedg-slider-head {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var( --ed-text-dim, #b9c0cc );
}

.wpiedg-slider-val {
	color: var( --ed-text, #e7ebf2 );
	font-variant-numeric: tabular-nums;
}

#wpie-root .wpiedg-slider input[ type='range' ] {
	width: 100%;
	accent-color: var( --accent, #3b66ff );
	cursor: pointer;
}

/* -------------------------------- shuffle -------------------------------- */

#wpie-root .wpiedg-shuffle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 2px;
	padding: 9px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 700;
	color: var( --ed-text, #e7ebf2 );
	background: var( --ed-panel, rgba( 255, 255, 255, 0.06 ) );
	border: 1px solid var( --ed-border, #444b57 );
	cursor: pointer;
}

#wpie-root .wpiedg-shuffle:hover {
	border-color: var( --accent, #3b66ff );
	color: var( --accent, #3b66ff );
}

#wpie-root .wpiedg-shuffle svg {
	width: 16px;
	height: 16px;
}

/* -------------------------------- footer --------------------------------- */

.wpiedg-footbtns {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

@media ( max-width: 960px ) {

	.wpiedg-dialog {
		height: 96vh;
	}

	.wpiedg-body {
		flex-direction: column;
	}

	.wpiedg-col {
		width: auto;
		min-width: 0;
	}

	.wpiedg-center {
		order: -1;
		min-height: 260px;
	}
}

/* Website content source (v1.12): load button + status note in one row. */
#wpie-root .wpiedg-siterow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

#wpie-root .wpiedg-sitestatus {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}