/* Aura — the Studio
   A minimal two-column UI: the chat (left) + the preview/fields (right).
   Everything is scoped under .aipb-studio-root so as not to touch the rest of the admin. */

.aipb-studio-root {
	--bg: #ffffff;
	--muted: #f6f7f9;
	--border: #e5e7eb;
	--text: #1f2430;
	--dim: #6b7280;
	--accent: #6d5efc;
	--accent-ink: #ffffff;
	--accent-soft: rgba(109, 94, 252, 0.10);
	--user-bubble: #6d5efc;
	--radius: 14px;
	--shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.aipb-studio-root * { box-sizing: border-box; }

/* --- The Studio full screen: it hides WordPress's admin chrome --- */
#adminmenumain, #adminmenuback, #adminmenuwrap { display: none !important; }
#wpadminbar { display: none !important; }
html.wp-toolbar { padding-top: 0 !important; }
#wpcontent { margin-left: 0 !important; padding-left: 0 !important; }
#wpbody-content { padding-bottom: 0 !important; float: none !important; }
#wpbody-content > .notice, #wpbody-content > .updated, #wpbody-content > .error, #wpbody-content > .update-nag { display: none !important; }
#wpfooter { display: none !important; }
#wpbody { padding: 0 !important; }

/* The container fills the window; the banner sits above, the Studio fills the rest. */
.aipb-studio-root {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.aipb-studio {
	position: relative; /* the anchor for the expanded code editor's overlay */
	display: flex;
	flex: 1;
	min-height: 0;
	background: var(--bg);
	overflow: hidden;
}

/* ------------------------------ Top bar -------------------------------- */

.aipb-topbar {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: #fff;
	border-bottom: 1px solid var(--border);
}
.aipb-topbar .aipb-spacer { flex: 1; }
.aipb-listwrap { position: relative; display: inline-flex; }

.aipb-title {
	flex: 0 1 200px;
	min-width: 110px;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid var(--border);
	border-radius: 10px !important;
	padding: 5px 10px;
	background: transparent;
	color: var(--text);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.aipb-title:hover { background: var(--muted); }
.aipb-title:focus { outline: none; border-color: var(--accent); background: #fff; }

/* ---------------------------- The left column -------------------------- */

.aipb-left {
	display: flex;
	flex-direction: column;
	width: 34%;
	min-width: 320px;
	max-width: 460px;
	border-right: 1px solid var(--border);
}

.aipb-tabs {
	flex: none;
	display: flex;
	gap: 4px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	background: #fff;
}
/* The tabs are ICONS, with the name in the tooltip and in aria-label: six words in a row read as a
   list to be gone through, six icons read as one bar — and the column they live in is a third of
   the screen and belongs to the conversation. */
.aipb-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 32px;
	border: none;
	background: transparent;
	padding: 0;
	border-radius: 9px;
	cursor: pointer;
	color: var(--dim);
	transition: background .12s ease, color .12s ease;
}
.aipb-tab:hover { background: var(--muted); color: var(--text); }
.aipb-tab.active { background: var(--accent-soft); color: var(--accent); }
.aipb-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.aipb-tab-ico { display: block; line-height: 0; }
.aipb-tab-ico svg { display: block; width: 18px; height: 18px; }

/* The counter on the Checks tab: grey for warnings, red when something is broken.
   It is the only signal that leaves that tab, so it has to tell the two apart — a dot that is always
   red goes back to being noise, which is the reason the checks left the chat in the first place.
   With the label gone it sits ON the icon, like a notification badge, instead of beside a word. */
.aipb-tab-badge {
	position: absolute;
	top: -1px;
	right: -1px;
	min-width: 15px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--border);
	color: var(--text);
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}
.aipb-tab-badge.grave { background: #fee2e2; color: #b42318; }

.aipb-panels { flex: 1; position: relative; overflow: hidden; }
.aipb-panel-chat { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* The screenshot drag & drop overlay */
.aipb-drop {
	position: absolute;
	inset: 10px;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--accent);
	background: var(--accent-soft);
	border: 2px dashed var(--accent);
	border-radius: 16px;
	pointer-events: none;
	backdrop-filter: blur(1px);
}

.aipb-head-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: transparent;
	color: var(--dim);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	transition: background .15s, color .15s, border-color .15s;
}
.aipb-head-btn:hover { background: var(--muted); color: var(--text); }
.aipb-head-btn:disabled { opacity: .35; cursor: default; }
.aipb-head-btn:disabled:hover { background: transparent; color: var(--dim); }
/* The Canvas toggle when active: highlighted like the "on" controls. */
.aipb-canvas-btn.active { background: var(--accent); color: #fff; }
.aipb-canvas-btn.active:hover { background: var(--accent); color: #fff; opacity: .9; }

/* --------------------------------- Chat -------------------------------- */

/* Messages */
.aipb-messages {
	flex: 1;
	overflow-y: auto;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-behavior: smooth;
}

.aipb-msg { max-width: 88%; display: flex; }
.aipb-msg-bubble {
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	word-wrap: break-word;
}
.aipb-msg.user { align-self: flex-end; }
.aipb-msg.user .aipb-msg-bubble {
	background: var(--user-bubble);
	color: #fff;
	border-bottom-right-radius: 5px;
}
.aipb-msg.bot { align-self: flex-start; }
.aipb-msg.bot .aipb-msg-bubble {
	background: var(--muted);
	color: var(--text);
	border-bottom-left-radius: 5px;
}
.aipb-msg.bot.warn .aipb-msg-bubble {
	background: #fff7ed;
	color: #9a3412;
	border: 1px solid #fed7aa;
}
/* Align the sections: at the top of the blocks list, where the problem is visible. */
.aipb-blocks-uniform {
	display: block;
	width: 100%;
	margin: 0 0 10px;
	text-align: left;
}

/* Checkboxes inside a message: which sections accept the proposal. */
.aipb-msg-choices {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px;
}
.aipb-msg-choice {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	cursor: pointer;
}
.aipb-msg-choice input { margin: 0; }

/* Actions at the end of a bot message: a proposal that can be accepted where it is made, instead of
   having to remember which panel the right button was in. */
.aipb-msg-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 9px;
}
.aipb-msg-actions .aipb-btn {
	padding: 5px 11px;
	font-size: 12.5px;
	border-radius: 8px;
}
.aipb-msg-bubble code {
	background: rgba(0, 0, 0, 0.06);
	padding: 1px 5px;
	border-radius: 5px;
	font-size: 12px;
}

/* The code arriving, live, under the declaration of intent.
   It is deliberately QUIET — small, dim, monospace, no border: it is the sound of the engine, not
   something to read. What is meant to be read is the line above it. Its height is fixed so that the
   chat does not jump on every repaint, and the last lines are the ones showing, which is where the
   model is writing. */
.aipb-msg-stream {
	margin: 7px 0 0;
	padding: 7px 9px;
	max-height: 104px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	color: var(--dim);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-all;
}

/* The "typing" indicator */
.aipb-typing { display: inline-flex; gap: 4px; align-items: center; }
.aipb-typing span {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--dim); opacity: .5;
	animation: aipb-blink 1.2s infinite ease-in-out both;
}
.aipb-typing span:nth-child(2) { animation-delay: .18s; }
.aipb-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes aipb-blink { 0%, 80%, 100% { transform: scale(.7); opacity: .3; } 40% { transform: scale(1); opacity: .9; } }
.aipb-elapsed { font-size: 11px; color: var(--dim); margin-left: 4px; }

/* Empty state */
.aipb-empty {
	margin: auto;
	text-align: center;
	max-width: 340px;
	padding: 20px;
	color: var(--dim);
}
.aipb-empty h2 { font-size: 17px; color: var(--text); margin: 0 0 6px; }
.aipb-empty p { font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.aipb-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.aipb-chip {
	font-size: 12.5px;
	padding: 7px 12px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: #fff;
	color: var(--text);
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.aipb-chip:hover { background: var(--accent-soft); border-color: var(--accent); }

/* Images attached in the user's messages */
.aipb-msg-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.aipb-msg-imgs img { width: 92px; max-height: 92px; object-fit: cover; border-radius: 8px; display: block; border: 1px solid rgba(255,255,255,.4); }

/* Composer */
.aipb-composer { position: relative; border-top: 1px solid var(--border); padding: 12px 14px; }

/* The intent tier bar: Touch-up / Section / Global, plus the Actions button that opens the two
   structural tiers (Split / Unite). */
.aipb-tierbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.aipb-tier {
	font-size: 11px; font-weight: 600; line-height: 1;
	padding: 5px 10px; border-radius: 999px;
	border: 1px solid var(--border); background: #fff; color: var(--dim);
	cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.aipb-tier:hover { border-color: var(--accent); color: var(--accent); }
/* THE ACTIVE ONE IS SOLID. There is no faint state any more, and its absence is the point: the
   faint one used to mean «this is what we guessed», and nothing is guessed. What the bar shows are
   the acts possible on what is selected — never one that cannot be performed, so there is no
   disabled state either. A chip that is here can be clicked, and one of them is always on. */
.aipb-tier.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* The way into the guide: quieter than a chip, because it does not perform anything. It sits at the
   end of the row, after the acts, where a footnote goes. */
.aipb-tier-info {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; padding: 0; border-radius: 999px;
	border: none; background: transparent; color: var(--dim);
	cursor: pointer; transition: background .12s, color .12s;
}
.aipb-tier-info:hover { background: var(--muted); color: var(--accent); }

/* ---- The guide: all seven acts, side by side, with their prices in one column ---- */

.aipb-guide { width: 460px; }
.aipb-guide-lede {
	margin: 0 0 14px; font-size: 11.5px; line-height: 1.55; color: var(--dim);
}
.aipb-guide-row { padding: 11px 0; border-top: 1px solid var(--border); }
.aipb-guide-row:first-of-type { border-top: none; padding-top: 0; }
/* An act you cannot reach from here is dimmed, not hidden: it is the only place left where Split
   and Unite can be discovered before you know the gesture that turns them on. */
.aipb-guide-row.is-off { opacity: .62; }
.aipb-guide-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.aipb-guide-name { font-size: 12.5px; font-weight: 650; }
.aipb-guide-name.is-live { color: var(--accent); }
.aipb-guide-tag {
	font-size: 9.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
	padding: 2px 6px; border-radius: 999px; background: var(--muted); color: var(--dim);
}
.aipb-guide-tag.is-live { background: var(--accent); color: var(--accent-ink); }
.aipb-guide-desc { margin: 0 0 5px; font-size: 11.5px; line-height: 1.5; }
.aipb-guide-line { margin: 0 0 3px; font-size: 11px; line-height: 1.5; color: var(--dim); }
.aipb-guide-line:last-child { margin-bottom: 0; }
.aipb-guide-lbl { font-weight: 650; color: var(--text); margin-right: 5px; }
.aipb-guide-line.is-warn .aipb-guide-lbl { color: #b45309; }

/* The act, written on the button that performs it. The label is what makes the confirmation
   unnecessary: you cannot press send without reading what send does. It disappears under 900px,
   where the button goes back to being an icon and the bar above carries the whole sentence. */
.aipb-send-lbl { font-size: 11px; font-weight: 600; line-height: 1; margin-left: 6px; white-space: nowrap; }
.aipb-send.is-stop .aipb-send-lbl { display: none; }
@media ( max-width: 900px ) { .aipb-send-lbl { display: none; } .aipb-send { padding: 0; } }

/* The controls row above the input: the tiers (left) + the fidelity mode (right). */
.aipb-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.aipb-controls .aipb-tierbar { margin-bottom: 0; }

/* The fidelity mode selector: a segmented control (like the viewport switch). */
.aipb-fidswitch { display: inline-flex; gap: 2px; padding: 2px; background: var(--muted); border-radius: 999px; }
.aipb-fid-btn {
	font-size: 11px; font-weight: 600; line-height: 1;
	padding: 5px 11px; border-radius: 999px;
	border: 0; background: transparent; color: var(--dim);
	cursor: pointer; transition: background .12s, color .12s, box-shadow .12s;
}
.aipb-fid-btn:hover { color: var(--text); }
.aipb-fid-btn.active { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* Variants: the same segmented control, plus the ×2/×3 pair that only appears once it is on.
   The active state is deliberately louder than the fidelity switch's — this one multiplies what a
   generation costs, and a control that spends money should look switched on from across the room. */
.aipb-varswitch { display: inline-flex; gap: 2px; padding: 2px; background: var(--muted); border-radius: 999px; }
.aipb-var-btn {
	font-size: 11px; font-weight: 600; line-height: 1;
	padding: 5px 11px; border-radius: 999px;
	border: 0; background: transparent; color: var(--dim);
	cursor: pointer; transition: background .12s, color .12s, box-shadow .12s;
}
.aipb-var-btn:hover { color: var(--text); }
.aipb-var-toggle.active { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.aipb-var-n { padding: 5px 8px; }
.aipb-var-n.active { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* The version switch above the preview. It exists only while there is a choice to make, so it is
   allowed to be the loudest thing in that bar: it is the one control there that is waiting on you. */
.aipb-variantbar {
	display: inline-flex; align-items: center; gap: 3px;
	padding: 3px 4px; margin-right: 8px;
	background: var(--accent); border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.aipb-var-label { font-size: 11px; font-weight: 600; color: #fff; opacity: .85; padding: 0 6px 0 8px; white-space: nowrap; }
.aipb-variantbar button { border: 0; cursor: pointer; font-weight: 600; line-height: 1; transition: background .12s, color .12s; }
.aipb-var-nav {
	font-size: 14px; padding: 4px 7px; border-radius: 999px;
	background: transparent; color: #fff; opacity: .8;
}
.aipb-var-nav:hover { background: rgba(255,255,255,.18); opacity: 1; }
.aipb-var-dot {
	font-size: 11px; min-width: 22px; padding: 5px 0; border-radius: 999px;
	background: rgba(255,255,255,.16); color: #fff;
}
.aipb-var-dot:hover { background: rgba(255,255,255,.3); }
.aipb-var-dot.active { background: #fff; color: var(--accent); }
.aipb-var-keep {
	font-size: 11px; padding: 5px 10px; margin-left: 4px; border-radius: 999px;
	background: #fff; color: var(--accent); white-space: nowrap;
}
.aipb-var-keep:hover { background: rgba(255,255,255,.9); }
.aipb-var-drop {
	font-size: 11px; padding: 5px 9px; border-radius: 999px;
	background: transparent; color: #fff; opacity: .75;
}
.aipb-var-drop:hover { background: rgba(255,255,255,.18); opacity: 1; }

/* The attachments strip (screenshots waiting to be sent) */
.aipb-attachments { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.aipb-thumb { position: relative; width: 56px; height: 56px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); }
.aipb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aipb-thumb-x {
	position: absolute; top: 2px; right: 2px;
	width: 18px; height: 18px; border: none; border-radius: 50%;
	background: rgba(0,0,0,.62); color: #fff; cursor: pointer;
	font-size: 9px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.aipb-thumb-x:hover { background: #b91c1c; }
.aipb-thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--muted); }
.aipb-thumb-badge {
	position: absolute; left: 3px; bottom: 3px;
	min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px;
	background: rgba(0,0,0,.6); color: #fff;
	font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: .3px;
	display: flex; align-items: center; justify-content: center;
}
/* A PDF attachment: a document tile (no image preview). */
.aipb-thumb.pdf .aipb-thumb-ph { background: var(--muted); color: var(--dim); }
/* A PDF shown in a chat message. */
.aipb-msg-doc {
	display: inline-flex; align-items: center; gap: 6px;
	max-width: 100%; padding: 8px 11px; border-radius: 8px;
	border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12);
	font-size: 12px; line-height: 1.2; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;
}

.aipb-attach {
	flex: none; width: 34px; height: 34px; align-self: flex-end;
	border: none; background: transparent; color: var(--dim);
	cursor: pointer; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s, color .15s;
}
.aipb-attach:hover { background: #fff; color: var(--accent); }
/* Element picking active. */
.aipb-pick.active { background: var(--accent); color: #fff; }
.aipb-pick.active:hover { background: var(--accent); color: #fff; }
/* The chip of the picked element (the target of the next change). */
/* What the next message will land on, with the two ways out of it. It sits above the composer, is
   never grey, and does not disappear when you start typing — which is the whole point: the
   placeholder it replaces did exactly that. */
.aipb-target {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 2px 7px;
	font-size: 12px;
}
.aipb-target-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 4px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--text);
}
.aipb-target-ico { opacity: .7; }
.aipb-target-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; font-weight: 600; }
.aipb-target-x {
	border: none; background: transparent; color: var(--dim);
	cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 6px;
}
.aipb-target-x:hover { color: var(--text); background: var(--muted); }
.aipb-target-new {
	margin-left: auto;
	border: 1px solid var(--border); background: #fff; color: var(--text);
	cursor: pointer; font-size: 12px; padding: 4px 10px; border-radius: 999px;
	white-space: nowrap;
}
.aipb-target-new:hover { border-color: var(--accent); color: var(--accent); }

.aipb-pickchip {
	display: none; align-items: center; gap: 6px;
	margin-bottom: 8px; padding: 5px 8px; border-radius: 9px;
	background: var(--accent-soft); border: 1px solid var(--accent);
	font-size: 12px; color: var(--text);
}
.aipb-pickchip-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Menlo, monospace; }
.aipb-pickchip-x { border: none; background: transparent; color: var(--dim); cursor: pointer; font-size: 12px; padding: 0 2px; }
.aipb-pickchip-x:hover { color: var(--text); }
.aipb-input-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	background: var(--muted);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 8px 8px 8px 12px;
	transition: border-color .15s, background .15s;
}
.aipb-input-row:focus-within { border-color: var(--accent); background: #fff; }
.aipb-input {
	flex: 1;
	border: none;
	background: transparent;
	resize: none;
	font: inherit;
	font-size: 13.5px;
	line-height: 1.5;
	max-height: 140px;
	color: var(--text);
	outline: none;
	padding: 4px 0;
}
/* It cancels the WP admin's default focus box-shadow/border (.aipb-input-row provides the border). */
.aipb-input:focus { outline: none; box-shadow: none; border: none; }
/* WP's same blue ring on every Studio field: we remove it (we give the focus with the border). */
.aipb-studio-root input:focus,
.aipb-studio-root textarea:focus,
.aipb-studio-root select:focus { box-shadow: none; outline: none; }
.aipb-send {
	flex: none;
	/* It grows to fit the act written on it, and falls back to a square wherever that label is
	   hidden — while generating, and on a narrow screen. */
	min-width: 34px; height: 34px; padding: 0 9px;
	border: none;
	border-radius: 10px;
	background: var(--accent);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity .15s, transform .05s;
}
.aipb-send:hover { opacity: .9; }
.aipb-send:active { transform: scale(.94); }
.aipb-send:disabled { opacity: .4; cursor: default; }
/* While the AI generates, the button becomes "Stop" (red) and cancels the generation. */
.aipb-send.is-stop { background: #dc2626; padding: 0; }
.aipb-send.is-stop:hover { background: #b91c1c; opacity: 1; }
.aipb-hint { font-size: 11px; color: var(--dim); margin: 7px 2px 0; }
.aipb-hint code { background: var(--muted); padding: 1px 5px; border-radius: 4px; }

/* The slash commands menu */
.aipb-cmdmenu {
	position: absolute;
	left: 14px; right: 14px;
	bottom: calc(100% - 6px);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow);
	overflow: hidden;
	z-index: 5;
}
.aipb-cmd {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 9px 12px;
	cursor: pointer;
	font-size: 13px;
}
.aipb-cmd:hover, .aipb-cmd.active { background: var(--accent-soft); }
.aipb-cmd b { color: var(--accent); font-weight: 600; min-width: 92px; }
.aipb-cmd span { color: var(--dim); font-size: 12px; }

/* --------------------- The preview side (always visible) --------------- */

.aipb-side { flex: 1; display: flex; flex-direction: column; background: var(--muted); min-width: 0; }

/* The Desktop/Tablet/Mobile responsive switch (segmented, consistent with the mode switch) — it lives in the top bar */
.aipb-vp-switch { display: inline-flex; gap: 2px; padding: 2px; background: var(--muted); border-radius: 9px; }
.aipb-vp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 26px;
	border: none; background: transparent; color: var(--dim);
	border-radius: 7px; cursor: pointer;
	transition: background .15s, color .15s;
}
.aipb-vp-btn:hover { color: var(--text); }
.aipb-vp-btn.active { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.aipb-vp-btn svg { display: block; }

/* The preview bar's icon buttons (refresh, preview, public page) */
.aipb-pv-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	border: none; background: transparent; color: var(--dim);
	border-radius: 8px; cursor: pointer;
	transition: background .15s, color .15s;
}
.aipb-pv-btn:hover { background: var(--muted); color: var(--text); }
.aipb-pv-btn:disabled { opacity: .35; cursor: default; }
.aipb-pv-btn:disabled:hover { background: transparent; color: var(--dim); }

.aipb-modeswitch {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	background: var(--muted);
	border: 1px solid var(--border);
	border-radius: 10px;
}
.aipb-modebtn {
	border: none;
	background: transparent;
	color: var(--dim);
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	padding: 5px 14px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.aipb-modebtn:hover { color: var(--text); }
.aipb-modebtn.active {
	background: #fff;
	color: var(--accent);
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .06 );
}

.aipb-typechip {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 500;
	color: var(--accent);
	background: var(--accent-soft);
	border-radius: 999px;
	padding: 4px 11px;
}
.aipb-metalink { color: var(--accent); text-decoration: none; font-weight: 500; }
.aipb-metalink:hover { text-decoration: underline; }

.aipb-btn {
	border: 1px solid var(--border);
	background: #fff;
	color: var(--text);
	padding: 7px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s;
}
.aipb-btn:hover { background: var(--muted); }
.aipb-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.aipb-btn.primary:hover { opacity: .92; background: var(--accent); }
.aipb-btn.ghost { background: transparent; color: var(--dim); }
.aipb-btn.ghost:hover { background: var(--muted); color: var(--text); }
.aipb-btn:disabled { opacity: .5; cursor: default; }
/* The "Draft" status badge next to the title. */
.aipb-status-badge {
	display: inline-flex; align-items: center;
	padding: 3px 9px; border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: .02em;
	background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
}
/* The history popup: anchored under its own button (on the left). */
.aipb-hist-pop { left: 0; right: auto; }

.aipb-preview-wrap { flex: 1; position: relative; overflow: hidden; display: flex; align-items: stretch; justify-content: center; }
.aipb-preview-frame { width: 100%; height: 100%; border: none; background: #fff; display: block; }
/* Device mode: the iframe is constrained and centred on the canvas, like a device. */
.aipb-preview-wrap.is-device { padding: 18px; overflow-y: auto; }
.aipb-preview-wrap.is-device .aipb-preview-frame {
	height: 100%;
	max-width: 100%;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 6px 28px rgba(16, 24, 40, .14);
	background: #fff;
	transition: width .2s cubic-bezier(.22,1,.36,1);
}

.aipb-preview-empty {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--dim); font-size: 13px; text-align: center; padding: 24px;
}

/* The preview's loading skeleton (the first generation) */
.aipb-skeleton { position: absolute; inset: 0; padding: 18px; background: #fff; overflow: hidden; z-index: 6; }
.aipb-sk-row, .aipb-sk-grid span {
	border-radius: 12px;
	background: linear-gradient(90deg, #eef0f3 25%, #f6f7f9 37%, #eef0f3 63%);
	background-size: 400% 100%;
	animation: aipb-sk 1.4s ease infinite;
}
.aipb-sk-row { margin-bottom: 14px; }
.aipb-sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
.aipb-sk-grid span { height: 120px; display: block; }
@keyframes aipb-sk { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .aipb-sk-row, .aipb-sk-grid span { animation: none; } }

/* A thin outline highlighting the section under the mouse */
.aipb-sectoutline {
	position: absolute; z-index: 14; pointer-events: none;
	border: 1.5px solid var(--accent); border-radius: 6px;
	box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The section's context toolbar (on hover over the preview) */
.aipb-sectbar {
	position: absolute; z-index: 15;
	display: flex; gap: 2px; padding: 3px;
	background: #1f2430; border-radius: 10px;
	box-shadow: 0 4px 16px rgba(16, 24, 40, .28);
}
.aipb-sectbtn {
	width: 28px; height: 28px;
	border: none; background: transparent; color: #fff;
	border-radius: 7px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	opacity: .8; transition: background .12s, opacity .12s;
}
.aipb-sectbtn:hover { background: rgba(255, 255, 255, .16); opacity: 1; }
.aipb-sectbtn svg { display: block; }

/* The blocks canvas (a page) */
.aipb-blocks { position: absolute; inset: 0; overflow-y: auto; padding: 16px; }
.aipb-block-card {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 10px 12px 10px 8px;
	margin-bottom: 10px;
	cursor: grab;
	transition: border-color .15s, box-shadow .15s;
}
.aipb-block-card:active { cursor: grabbing; }
.aipb-block-card.renaming { cursor: default; }
.aipb-block-card:hover { border-color: #d1d5db; }
.aipb-block-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Marked for a merge. Deliberately QUIETER than the selection: one section is still the one being
   edited, and painting four rows as loudly as the selected one would leave nobody able to say which
   of the four the composer is talking about. */
.aipb-block-card.marked { border-color: var(--accent); border-style: dashed; }
.aipb-block-card.marked.selected { border-style: solid; }
/* The number is the position the section will have INSIDE the merged one. */
.aipb-block-mark {
	flex: 0 0 auto;
	min-width: 17px; height: 17px; padding: 0 4px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 700; line-height: 1;
	border-radius: 999px; background: var(--accent); color: #fff;
}
.aipb-block-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.aipb-block-name { font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.aipb-block-rename { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text); border: 1px solid var(--accent); border-radius: 7px; padding: 3px 7px; outline: none; background: #fff; }
/* Reordering by drag & drop */
.aipb-block-card.dragging { opacity: .4; }
.aipb-block-card.drop-before { box-shadow: 0 -3px 0 -1px var(--accent); }
.aipb-block-card.drop-after { box-shadow: 0 3px 0 -1px var(--accent); }
.aipb-block-badge {
	flex: none;
	font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
	color: var(--dim); background: var(--muted);
	border-radius: 6px; padding: 2px 7px;
}
.aipb-block-badge.ref { color: var(--accent); background: var(--accent-soft); }
.aipb-block-badge.layer { color: var(--accent); background: var(--accent-soft); }
.aipb-blocks-layers-label {
	font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--dim); padding: 14px 2px 6px;
}
.aipb-block-card.layer .aipb-block-grip { visibility: hidden; cursor: default; }

/* The handle. It is the only thing that says the row can be dragged: pale at rest, visible as soon
   as the mouse enters the card. */
.aipb-block-grip {
	flex: none; display: inline-flex; align-items: center;
	color: #cbd0da; cursor: grab; padding: 2px 1px; border-radius: 6px;
	transition: color .15s;
}
.aipb-block-card:hover .aipb-block-grip { color: var(--dim); }
.aipb-block-grip:active { cursor: grabbing; }
.aipb-block-card.renaming .aipb-block-grip { visibility: hidden; }

/* One button: it opens the menu with the actions written out in full. */
.aipb-block-more {
	flex: none; width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border: none; background: transparent; border-radius: 8px;
	color: var(--dim); cursor: pointer; line-height: 1;
	transition: background .12s, color .12s;
}
.aipb-block-more:hover, .aipb-block-more.open { background: var(--muted); color: var(--text); }
.aipb-block-more.open { background: var(--accent-soft); color: var(--accent); }
.aipb-block-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.aipb-block-footer { display: flex; gap: 8px; margin-top: 6px; }
.aipb-block-footer .aipb-btn { flex: 1; text-align: center; }
/* Icon-only: it takes the room it needs and gives the rest to the button with a name on it. */
.aipb-block-footer .aipb-btn-icon { flex: 0 0 auto; }
.aipb-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 34px;
	height: 34px;
}

/* A section's actions menu (from the ⋯ button or a right click on the row).
   `fixed` because the sections list scrolls and would clip the menu of the last ones. */
.aipb-menu {
	position: fixed; z-index: 1000;
	min-width: 236px; max-width: 300px;
	padding: 5px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 14px 36px rgba(16, 24, 40, .16);
	animation: aipb-in .12s ease;
}
.aipb-menu-item {
	display: flex; align-items: flex-start; gap: 9px;
	width: 100%; padding: 7px 9px;
	border: none; background: transparent; border-radius: 8px;
	font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.aipb-menu-item:hover:not(:disabled) { background: var(--muted); }
.aipb-menu-item:focus-visible { background: var(--muted); outline: 2px solid var(--accent); outline-offset: -2px; }
.aipb-menu-item:disabled { opacity: .38; cursor: default; }
.aipb-menu-ico { flex: none; display: inline-flex; color: var(--dim); margin-top: 1px; }
.aipb-menu-item:hover:not(:disabled) .aipb-menu-ico { color: var(--text); }
.aipb-menu-txt { min-width: 0; }
.aipb-menu-txt .l { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; }
.aipb-menu-txt .h { display: block; font-size: 11px; color: var(--dim); line-height: 1.35; margin-top: 1px; }
.aipb-menu-sep { height: 1px; background: var(--border); margin: 5px 8px; }
/* The only entry that destroys something: set apart at the bottom, and red. */
.aipb-menu-item.danger, .aipb-menu-item.danger .aipb-menu-ico { color: #b42318; }
.aipb-menu-item.danger:hover:not(:disabled) { background: #fef3f2; }
.aipb-menu-item.danger:hover:not(:disabled), .aipb-menu-item.danger:hover:not(:disabled) .aipb-menu-ico { color: #912018; }
.aipb-sec-head { padding: 8px 11px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); font-weight: 600; }

/* The fields panel */
.aipb-fields { position: absolute; inset: 0; overflow-y: auto; padding: 18px; }

/* ONE FIELD IS ONE ROW: the type, the name, the control.

   It was a stack — label line, then control under it — and that is why the panel could not be read.
   Every field cost two rows, and because the name sat ABOVE its control the eye had to decide by
   proximity alone whether it belonged to the box under it or the box over it. Even spacing cannot
   answer that. Beside it, the question never arises, and the column of names down the left edge
   becomes the structure: everything sharing that column is a field, everything sharing a card is
   one element.

   The name column is fixed rather than fluid on purpose: it is the alignment that does the work,
   and a column that resized to its longest word would move from section to section. */
.aipb-field {
	display: grid;
	grid-template-columns: 15px 84px minmax(0, 1fr) 34px;
	align-items: center;
	gap: 10px;
	margin-bottom: 7px;
}
/* Prose and rich text are boxes, not lines: the name and the mark meet the FIRST line rather than
   floating in the middle of an empty rectangle. */
.aipb-field--tall { align-items: start; }
.aipb-field--tall .aipb-field-ico,
.aipb-field--tall .aipb-field-label { margin-top: 9px; }

/* The mark is a grid cell now, not an overlay pinned with a measured `top`. A cell has the row's
   height by definition: there is no number left to get wrong on somebody else's font stack. */
.aipb-field-ico { display: block; color: var(--dim); pointer-events: none; }
.aipb-field:focus-within .aipb-field-ico { color: var(--accent); }

/* A NAME IN SENTENCE CASE. There used to be three competing scales — a bold uppercase group title,
   an uppercase unit title, and uppercase field labels that turned lower-case inside a unit. Now a
   name takes its rank from weight alone, and nothing in the panel shouts. */
.aipb-field-label {
	font-size: 11.5px; color: var(--dim); font-weight: 500;
	overflow-wrap: anywhere; cursor: default;
}

.aipb-field input[type=text], .aipb-field textarea {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 7px 10px;
	font: inherit;
	font-size: 13px;
	background: #fff;
	color: var(--text);
}
.aipb-field input:focus, .aipb-field textarea:focus { outline: none; border-color: var(--accent); }
/* Taller than the two lines it used to show: in a row the control column is narrower than the
   old full-width stack, so the same paragraph needs more height to arrive whole rather than cut
   off mid-sentence. It still resizes. */
.aipb-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.aipb-field input[type=color] { width: 46px; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; }
/* A shortcode field ({{s:…}}): it is code, it reads better in monospace. */
.aipb-field input.aipb-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
/* The switch ends its row rather than filling it. */
.aipb-field .aipb-switch { justify-self: start; }

/* THE ELEMENT'S SWITCH: reserved, and out of the way until it is wanted.

   Every element has one now, so a column of switches at full strength would be the loudest thing
   in the panel and the least often used — people open this to change a word. It fades in on hover
   or keyboard focus, and its column is reserved whether or not there is a switch in it: a control
   that appears by making the row jump is worse than one that was always there. */
.aipb-field-off { justify-self: end; display: flex; align-items: center; }
.aipb-field-off--live { opacity: 0; transition: opacity .12s ease; }
.aipb-field:hover .aipb-field-off--live,
.aipb-field:focus-within .aipb-field-off--live { opacity: 1; }

/* OFF IS NEVER HIDDEN. An element switched off whose switch is also invisible is an element that
   has vanished with nothing on screen to say why: a preview missing its button, and a panel showing
   that button's fields perfectly filled in, with no explanation between the two. */
.aipb-field.is-off .aipb-field-off--live { opacity: 1; }
.aipb-field.is-off .aipb-field-label,
.aipb-field.is-off .aipb-field-ico { opacity: .5; }
.aipb-field.is-off input,
.aipb-field.is-off textarea,
.aipb-field.is-off .aipb-rte,
.aipb-field.is-off .aipb-media-field { opacity: .45; }
/* Keyboard reach is not dimmed away: a field can be edited while hidden, which is how you prepare
   something before switching it on. */
.aipb-field.is-off:focus-within input,
.aipb-field.is-off:focus-within textarea,
.aipb-field.is-off:focus-within .aipb-rte { opacity: 1; }

/* The rich text mini editor ({{r:…}}) */
.aipb-rte { border: 1px solid var(--border); border-radius: 9px; background: #fff; overflow: hidden; }
.aipb-rte:focus-within { border-color: var(--accent); }
.aipb-rte-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border); background: var(--muted); }
.aipb-rte-bar .aipb-field-ico { position: static; margin-right: 6px; }
.aipb-rte:focus-within .aipb-field-ico { color: var(--accent); }
.aipb-rte-btn {
	min-width: 26px; height: 24px; padding: 0 6px;
	border: 1px solid transparent; border-radius: 6px;
	background: transparent; color: var(--dim);
	font-size: 12px; line-height: 1; cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
}
.aipb-rte-btn:hover { background: #fff; color: var(--accent); border-color: var(--border); }
.aipb-rte-btn.b { font-weight: 700; }
.aipb-rte-btn.i { font-style: italic; font-family: Georgia, serif; }
.aipb-rte-input {
	min-height: 44px; padding: 8px 10px;
	font: inherit; font-size: 13px; line-height: 1.5; color: var(--text);
	outline: none; overflow-wrap: anywhere;
}
.aipb-rte-input:empty::before { content: attr(data-placeholder); color: var(--dim); }
.aipb-media-field { display: flex; gap: 6px; align-items: center; min-width: 0; }
.aipb-media-field input { flex: 1; min-width: 0; }
.aipb-media-btn {
	flex: none;
	border: 1px solid var(--border);
	background: #fff;
	color: var(--text);
	border-radius: 9px;
	padding: 0 12px;
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
}
.aipb-media-btn:hover { background: var(--muted); border-color: var(--accent); color: var(--accent); }
/* The chosen image, at the head of its own row. It keeps its place when empty — holding the type's
   mark — so a section with three images does not change height as they are filled in. */
.aipb-media-thumb {
	flex: none; width: 32px; height: 32px;
	border: 1px solid var(--border); border-radius: 8px;
	background: var(--muted); overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.aipb-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aipb-media-thumb.is-empty { color: var(--dim); border-style: dashed; }
.aipb-media-btn { height: 32px; }

.aipb-repeater { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 14px; background: #fff; }
/* The list's own name and, when it has one, the switch that takes the whole list off the page.
   Turned off, the rows dim exactly as a field's row does — the heading stays at full strength, so
   the control that put the list in that state is the one thing still easy to read. */
.aipb-rep-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.aipb-repeater.is-off .aipb-rep-item,
.aipb-repeater.is-off .aipb-rep-add { opacity: .45; }
.aipb-rep-item { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: var(--muted); }
.aipb-rep-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--dim); margin-bottom: 8px; }
.aipb-rep-del { border: none; background: none; color: #b91c1c; cursor: pointer; font-size: 12px; }
.aipb-rep-add { border: 1px dashed var(--border); background: #fff; color: var(--accent); border-radius: 9px; padding: 7px 12px; cursor: pointer; font-size: 12.5px; width: 100%; }
.aipb-rep-add:hover { border-color: var(--accent); background: var(--accent-soft); }
.aipb-fields-empty { color: var(--dim); font-size: 13px; text-align: center; padding: 30px 20px; }

/* The "synced section" box: it explains and offers to unlink from the pattern */
.aipb-detach-box { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: #fff; }
.aipb-detach-title { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.aipb-detach-desc { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--dim); }
.aipb-detach-box .aipb-btn { width: 100%; }

/* The code editor (HTML/CSS/JS) */
.aipb-code { position: absolute; inset: 0; flex-direction: column; }
.aipb-code-tabs { flex: none; display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: #fff; }
.aipb-code-tabs button {
	border: 1px solid var(--border);
	background: var(--muted);
	color: var(--dim);
	font-size: 12px; font-weight: 700; letter-spacing: .02em;
	padding: 5px 14px; border-radius: 8px; cursor: pointer;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.aipb-code-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* The "Format" button: it opens the actions group on the right. */
.aipb-code-fmt { margin-left: auto; }
/* The expand/collapse button: icon sized. */
.aipb-code-expand { padding: 5px 9px; display: inline-flex; align-items: center; }
/* The editor at full width over the preview (an overlay anchored to .aipb-studio). */
.aipb-code-expanded { z-index: 40; background: #fff; box-shadow: -8px 0 28px rgba(16,24,40,.08); }
.aipb-code-host { flex: 1; position: relative; overflow: hidden; background: #fff; }
/* DSL highlighting in the code: editable placeholders and the loop/if controls. */
.aipb-code-host .cm-aipb-ph { color: #6d5efc; font-weight: 700; }
.aipb-code-host .cm-aipb-ctrl { color: #b45309; font-weight: 700; }
/* CodeMirror's autocomplete and search dialog (mounted outside the studio root). */
.CodeMirror-hints {
	position: absolute; z-index: 100010; max-height: 240px; overflow: auto;
	margin: 0; padding: 4px; list-style: none;
	background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.16);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
}
.CodeMirror-hint { padding: 4px 8px; border-radius: 5px; white-space: pre; color: #1f2430; cursor: pointer; }
li.CodeMirror-hint-active { background: #6d5efc; color: #fff; }
.CodeMirror-dialog { border-bottom: 1px solid #e5e7eb; background: #fff; padding: 6px 10px; font-size: 12.5px; color: #1f2430; }
.CodeMirror-dialog input { border: 1px solid #e5e7eb; border-radius: 6px; padding: 3px 6px; font-family: inherit; }
.aipb-code-host .CodeMirror {
	height: 100%;
	font-size: 12.5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.aipb-code-plain {
	position: absolute; inset: 0; width: 100%; height: 100%;
	border: none; padding: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px; line-height: 1.5; resize: none; outline: none;
	color: var(--text); background: #fff;
	white-space: pre; tab-size: 2;
}

/* The shortcode bar */
.aipb-meta { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-top: 1px solid var(--border); background: #fff; font-size: 12px; color: var(--dim); }
.aipb-shortcode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--muted); border: 1px solid var(--border); border-radius: 7px; padding: 3px 8px; cursor: copy; color: var(--text); }
.aipb-shortcode:hover { border-color: var(--accent); }

/* The components list (a dropdown anchored to the ☰ button) */
.aipb-sections-pop {
	position: absolute;
	top: calc(100% + 6px); right: 0; left: auto;
	width: 280px;
	max-height: 60vh;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow);
	z-index: 10;
	padding: 6px;
}
.aipb-sec-item { padding: 9px 11px; border-radius: 9px; cursor: pointer; }
.aipb-sec-item:hover { background: var(--muted); }
.aipb-sec-item.active { background: var(--accent-soft); }
.aipb-sec-item .t { font-size: 13px; font-weight: 500; color: var(--text); }
.aipb-sec-item .d { font-size: 11px; color: var(--dim); margin-top: 2px; }
.aipb-sec-empty { padding: 14px; color: var(--dim); font-size: 12.5px; text-align: center; }

/* --------------------------- The Library tab --------------------------- */

.aipb-library { position: absolute; inset: 0; overflow-y: auto; padding: 16px; }

.aipb-lib-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.aipb-lib-title { font-size: 14px; font-weight: 600; color: var(--text); }
.aipb-lib-refresh {
	border: 1px solid var(--border); background: #fff; color: var(--dim);
	width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
	font-size: 15px; line-height: 1; transition: background .15s, color .15s;
}
.aipb-lib-refresh:hover { background: var(--muted); color: var(--text); }

.aipb-lib-sub { font-size: 12px; color: var(--dim); line-height: 1.5; margin: 0 0 14px; }

.aipb-lib-group {
	font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
	color: var(--dim); font-weight: 600;
	margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.aipb-lib-group:first-child { margin-top: 0; }

.aipb-lib-card {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border: 1px solid var(--border); border-radius: 11px;
	padding: 11px 12px; margin-bottom: 9px;
	cursor: grab;
	transition: border-color .15s, box-shadow .15s, transform .1s;
}
.aipb-lib-card:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.aipb-lib-card:active { cursor: grabbing; }
.aipb-lib-card.is-dragging { opacity: .45; }
.aipb-lib-card-body { flex: 1; min-width: 0; }
.aipb-lib-card-title { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aipb-lib-card-meta { font-size: 11px; color: var(--dim); margin-top: 2px; }
.aipb-lib-add {
	flex: none; width: 28px; height: 28px; border-radius: 8px;
	border: 1px solid var(--border); background: var(--muted); color: var(--accent);
	font-size: 18px; line-height: 1; cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.aipb-lib-add:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.aipb-lib-empty { padding: 24px 14px; color: var(--dim); font-size: 12.5px; text-align: center; line-height: 1.5; }

/* The drop overlay over the preview */
.aipb-libdrop {
	position: absolute; inset: 0; z-index: 20;
	background: var(--accent-soft);
	border: 2px dashed var(--accent);
	border-radius: 4px;
}
.aipb-libdrop-hint {
	position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
	background: var(--accent); color: #fff;
	font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0,0,0,.15); pointer-events: none;
}
.aipb-libdrop-line {
	display: none; position: absolute; left: 8px; right: 8px; height: 3px;
	background: var(--accent); border-radius: 3px; pointer-events: none;
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.aipb-libdrop-line::before {
	content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
	width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}

/* Toast */
.aipb-toasts { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 100000; }
.aipb-toast { background: #1f2430; color: #fff; padding: 10px 15px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow); animation: aipb-in .2s ease; }
.aipb-toast.err { background: #b91c1c; }
@keyframes aipb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The provider banner (a full-width strip above the Studio) */
.aipb-banner {
	flex: none;
	margin: 0;
	padding: 9px 16px;
	background: #fffbeb;
	border-bottom: 1px solid #fde68a;
	font-size: 13px;
	color: #92400e;
}
.aipb-banner a { color: #92400e; font-weight: 600; }

/* The unsaved draft restore bar */
.aipb-draftbar {
	flex: none;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 8px 16px;
	background: var(--accent-soft);
	border-bottom: 1px solid var(--border);
	font-size: 13px; color: var(--text);
}
.aipb-draftbar-actions { display: flex; gap: 8px; flex: none; }
.aipb-draftbar .aipb-btn { padding: 5px 12px; font-size: 12.5px; }

/* Responsive: the chat/tabs on top, the preview below */
@media (max-width: 960px) {
	.aipb-studio { flex-direction: column; }
	.aipb-left { width: 100%; max-width: none; min-width: 0; flex: 0 0 55%; border-right: none; border-bottom: 1px solid var(--border); }
	.aipb-side { flex: 1; min-height: 40vh; }
}

/* ---------------- Fields grouped by element ---------------- */

.aipb-fgroup {
	border: 1px solid var(--border);
	border-radius: 12px;
	background: #fff;
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color .15s, opacity .15s;
}
.aipb-fgroup-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 12px;
	background: var(--muted);
	border-bottom: 1px solid var(--border);
}
.aipb-fgroup-title { font-size: 12.5px; font-weight: 650; color: var(--text); }
.aipb-fgroup-body { padding: 10px 12px 5px; }
/* A hidden element: the box stays, but you can see it is off. */
.aipb-fgroup.is-off { opacity: .6; }
.aipb-fgroup.is-off .aipb-fgroup-head { background: #fff; }

/* The show/hide switch */
.aipb-switch {
	flex: none; width: 34px; height: 20px; padding: 0;
	border: 1px solid var(--border); border-radius: 999px;
	background: #fff; cursor: pointer; position: relative;
	transition: background .15s, border-color .15s;
}
.aipb-switch-dot {
	position: absolute; top: 2px; left: 2px;
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--dim);
	transition: transform .15s, background .15s;
}
.aipb-switch.is-on { background: var(--accent); border-color: var(--accent); }
.aipb-switch.is-on .aipb-switch-dot { transform: translateX(14px); background: #fff; }
.aipb-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A boolean is a field like any other: mark, name, control. It needs no layout of its own — which
   is the point of every row being the same three columns. */

/* A sub-group (image + alt, button + link) DRAWS NOTHING. It was a caps heading over a 2px left
   rule: a third level of nesting, signalled more faintly than the two above it, and the reason the
   panel read as a pile — you could not see where an element ended and its sub-group began. In rows
   there is nothing for it to do: two fields describing one thing sit next to each other, named, and
   the reading order binds them. What is left of it is a `role="group"` with a name, which is the
   part a rule could never carry anyway. */
.aipb-funit { display: contents; }

/* --------- Tidying the code: a summary of what would change, then it applies --------- */
.aipb-tidy-back {
	position: fixed; inset: 0; z-index: 100050;
	background: rgba(15, 18, 26, .45);
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}
.aipb-tidy {
	box-sizing: border-box;
	background: var(--bg, #ffffff); color: var(--text, #1f2430);
	border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
	width: min(760px, 100%); max-height: 88vh;
	display: flex; flex-direction: column;
}
.aipb-tidy-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.aipb-tidy-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.aipb-tidy-x {
	border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1;
	color: var(--dim, #6b7280); padding: 0 4px;
}
.aipb-tidy-x:hover { color: var(--text, #1f2430); }
.aipb-tidy-body { padding: 14px 16px; overflow: auto; }

.aipb-tidy-row {
	display: grid; grid-template-columns: 190px auto 1fr; gap: 10px; align-items: baseline;
	padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px;
}
.aipb-tidy-row .k { color: var(--dim); }
.aipb-tidy-row .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.aipb-tidy-row .h { color: var(--dim); font-size: 11.5px; }

.aipb-tidy-list { margin-top: 12px; }
.aipb-tidy-list .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); margin-bottom: 4px; }
.aipb-tidy-list .it { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; padding: 1px 0; }

.aipb-tidy-note, .aipb-tidy-warn { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--dim); }
.aipb-tidy-warn { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; }

.aipb-tidy-diff { display: flex; gap: 10px; margin-top: 14px; }
.aipb-tidy-diff .col { flex: 1 1 0; min-width: 0; }
.aipb-tidy-diff .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); margin-bottom: 4px; }
.aipb-tidy-diff pre {
	margin: 0; max-height: 320px; overflow: auto;
	background: #f8fafc; border: 1px solid var(--border); border-radius: 8px;
	padding: 8px 10px; font-size: 11px; line-height: 1.45;
	white-space: pre; tab-size: 2;
}

.aipb-tidy-foot {
	display: flex; gap: 8px; justify-content: flex-end;
	padding: 12px 16px; border-top: 1px solid var(--border, #e5e7eb);
}
.aipb-tidy-btn {
	border: 1px solid var(--border, #e5e7eb); background: var(--bg, #ffffff); color: var(--text, #1f2430);
	border-radius: 8px; padding: 7px 14px; font-size: 12.5px; cursor: pointer;
}
.aipb-tidy-btn:hover { border-color: var(--dim, #6b7280); }
.aipb-tidy-btn.primary { background: var(--accent, #6d5efc); border-color: var(--accent, #6d5efc); color: #fff; font-weight: 600; }
.aipb-tidy-btn.primary:hover { filter: brightness(1.06); }
.aipb-tidy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------- The Style panel (a tab in the left column) ----------------
   It used to be a third column, 302px taken from the preview exactly while somebody was correcting
   how something looks. Now it is a panel like the others, and the preview keeps its width. The
   fields follow one rule: grey = a computed value (you did not write it), black + a dot = your own
   rule. */

.aipb-style-panel { position: absolute; inset: 0; flex-direction: column; }

.aipb-stylebar {
	display: flex;
	flex: 1;
	flex-direction: column;
	background: var(--bg);
	min-height: 0;
}

.aipb-sb-head {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 12px; border-bottom: 1px solid var(--border);
	flex: 0 0 auto;
}
.aipb-sb-title { font-size: 13px; font-weight: 650; flex: 1; }
.aipb-sb-x {
	border: none; background: transparent; color: var(--dim);
	font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.aipb-sb-x:hover { background: var(--muted); color: var(--text); }

.aipb-sb-body { flex: 1; overflow-y: auto; padding: 10px 12px 24px; min-height: 0; }

.aipb-sb-warn {
	font-size: 12px; line-height: 1.5;
	padding: 12px 14px; text-align: left;
	color: #92400e; background: #fffbeb;
	border: 1px solid #fde68a; border-radius: 10px; margin-top: 10px;
}

/* Nothing selected: the one screen everybody sees first. */
.aipb-sb-empty {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 44px 22px; text-align: center; color: var(--dim);
	font-size: 12px; line-height: 1.55;
}
.aipb-sb-emptyico { color: #c7cbd3; }
.aipb-sb-emptyico svg { width: 30px; height: 30px; display: block; }
.aipb-sb-empty b { color: var(--text); font-size: 13px; margin-top: 2px; }
.aipb-sb-empty span { max-width: 34ch; }

/* ---- The target card: what is selected, and where the change is written ---- */

.aipb-sb-target {
	border: 1px solid var(--border);
	border-radius: 11px;
	background: var(--muted);
	padding: 9px 10px;
	margin-bottom: 14px;
	display: flex; flex-direction: column; gap: 7px;
}

/* Line 1: the element itself. */
.aipb-sb-id { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.aipb-sb-tag {
	font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--accent); flex: 0 1 auto; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aipb-sb-txt {
	font-size: 11px; color: var(--dim); flex: 1 1 auto; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aipb-sb-sec {
	flex: 0 0 auto; margin-left: auto;
	font-size: 9.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em;
	max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The other lines: a caption on the left, the thing on the right. */
.aipb-sb-tline { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 8px; align-items: center; }
.aipb-sb-tcap {
	font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: #9aa0ab; line-height: 1.3;
}

/* The chips: which selector the change lands on. */
.aipb-sb-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.aipb-sb-scb {
	display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
	border: 1px solid var(--border); background: var(--bg); color: var(--text);
	border-radius: 999px; padding: 3px 9px; cursor: pointer; font-size: 11px;
	transition: border-color .12s, background .12s, color .12s;
}
.aipb-sb-scb:hover { border-color: var(--dim); }
.aipb-sb-scb.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.aipb-sb-scb .k {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aipb-sb-scb .n {
	flex: 0 0 auto; font-size: 9.5px; font-weight: 700; color: var(--dim);
	background: rgba(16, 24, 40, .06); border-radius: 999px; padding: 0 5px; line-height: 15px;
}
.aipb-sb-scb.active .n { background: rgba(109, 94, 252, .16); color: var(--accent); }
.aipb-sb-scb .r { flex: 0 0 auto; color: var(--accent); font-size: 13px; line-height: 1; }

/* The state + the breakpoint */
.aipb-sb-ctx { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.aipb-sb-bp {
	font-size: 9.5px; color: var(--dim); padding: 2px 7px;
	border: 1px dashed var(--border); border-radius: 999px; background: var(--bg);
}
.aipb-sb-bp.is-on { color: var(--accent); border-color: var(--accent); border-style: solid; background: var(--accent-soft); }

/* The selector that will be written: no hidden magic. */
.aipb-sb-selline {
	display: flex; align-items: center; gap: 6px; min-width: 0;
	font-size: 10.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--text);
}
.aipb-sb-selline code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aipb-sb-more {
	margin-left: auto; flex: 0 0 auto; border: none; background: transparent;
	color: var(--accent); font-size: 10px; cursor: pointer; padding: 1px 5px; border-radius: 5px;
	font-family: inherit;
}
.aipb-sb-more:hover { background: var(--accent-soft); }

/* ---- Accordion groups: everything shut on arrival, the badge says where the values are ---- */

.aipb-sb-groups { display: flex; flex-direction: column; gap: 2px; }

.aipb-sb-group { border-radius: 9px; }
.aipb-sb-group.is-open { background: #fcfcfd; box-shadow: inset 0 0 0 1px var(--border); }

.aipb-sb-gh {
	display: flex; align-items: center; gap: 7px; width: 100%;
	border: none; background: transparent; color: var(--text);
	padding: 9px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left;
	border-radius: 9px;
}
.aipb-sb-gh:hover { background: var(--muted); }
.aipb-sb-group.is-open .aipb-sb-gh:hover { background: transparent; }
.aipb-sb-gh:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.aipb-sb-gt { flex: 1; min-width: 0; }
.aipb-sb-gh::after {
	content: ''; flex: 0 0 auto;
	width: 7px; height: 7px; margin-right: 2px;
	border-right: 1.6px solid #b6bac3; border-bottom: 1.6px solid #b6bac3;
	transform: rotate(-45deg) translate(-1px, -1px);
	transition: transform .16s ease;
}
.aipb-sb-group.is-open .aipb-sb-gh::after { transform: rotate(45deg) translate(-2px, -2px); }

/* The count of what is set inside: the only thing a closed group has to say. */
.aipb-sb-gc {
	flex: 0 0 auto;
	min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
	background: var(--accent-soft); color: var(--accent);
	font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
.aipb-sb-gc:empty { display: none; }
.aipb-sb-gb { padding: 2px 10px 12px; display: flex; flex-direction: column; gap: 7px; }

/* A field row */
.aipb-sb-row { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.aipb-sb-lab {
	flex: 0 0 82px; font-size: 11.5px; color: var(--dim);
	display: flex; align-items: center; gap: 4px;
}
.aipb-sb-row.is-set .aipb-sb-lab { color: var(--text); font-weight: 550; }
.aipb-sb-row > :not(.aipb-sb-lab) { flex: 1; min-width: 0; }
.aipb-sb-dot {
	width: 7px; height: 7px; padding: 0; flex: 0 0 auto;
	border: none; border-radius: 50%; background: var(--accent); cursor: pointer;
}
.aipb-sb-dot:hover { box-shadow: 0 0 0 3px var(--accent-soft); }

/* The controls */
.aipb-stylebar input[type="text"],
.aipb-stylebar input[type="number"],
.aipb-stylebar select {
	border: 1px solid var(--border); border-radius: 7px; background: var(--bg);
	color: var(--text); font-size: 12px; padding: 4px 6px; min-height: 26px; width: 100%;
	font-family: inherit;
}
.aipb-stylebar input:focus, .aipb-stylebar select:focus { outline: none; border-color: var(--accent); }
.aipb-stylebar .is-ghost { color: var(--dim); }

.aipb-sb-len { display: flex; gap: 4px; align-items: center; }
.aipb-sb-num { flex: 1 1 auto; min-width: 0; }
.aipb-sb-unit { flex: 0 0 54px; padding: 4px 2px !important; }
.aipb-sb-tok {
	flex: 0 0 auto; border: 1px solid var(--border); background: var(--bg); color: var(--accent);
	border-radius: 7px; width: 26px; height: 26px; cursor: pointer; font-size: 11px; line-height: 1;
}
.aipb-sb-tok:hover { border-color: var(--accent); background: var(--accent-soft); }
.aipb-sb-chip {
	flex: 1; text-align: left; border: 1px solid var(--border); background: var(--muted);
	color: var(--text); border-radius: 7px; padding: 4px 8px; font-size: 11px; cursor: pointer;
	min-height: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aipb-sb-chip:hover { border-color: var(--dim); }
.aipb-sb-tok.is-empty { color: var(--dim); }

/* ---- The link to the design system ----
   The ◆ diamond means one thing across the whole panel: this value is not a number, it is a token —
   it changes along with the brand. The blue dot stays «I wrote this». Two different marks because
   they are two different things, and confusing them leads to overwriting a token unknowingly. */

.aipb-sb-tokchip {
	flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px;
	border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
	border-radius: 7px; padding: 3px 8px; min-height: 26px; cursor: pointer;
	font-size: 11.5px; text-align: left;
}
.aipb-sb-tokchip:hover { filter: brightness(.97); }
.aipb-sb-tokdia { flex: 0 0 auto; font-size: 8px; line-height: 1; color: var(--accent); }
.aipb-sb-tokname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aipb-sb-tokval {
	margin-left: auto; flex: 0 0 auto; opacity: .7; font-size: 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%;
}
.aipb-sb-labdia { flex: 0 0 auto; font-size: 7px; color: var(--accent); cursor: help; }
.aipb-sb-num.is-token { color: var(--accent); }
.aipb-sb-num.is-token::placeholder { color: var(--accent); opacity: 1; }

.aipb-sb-bound {
	display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
	font-size: 10.5px; color: var(--accent);
}

/* The font field: it reads in the typeface it names. */
.aipb-sb-fontbtn {
	display: flex; align-items: center; gap: 5px; width: 100%;
	border: 1px solid var(--border); background: var(--bg); color: var(--text);
	border-radius: 7px; padding: 3px 8px; min-height: 26px; cursor: pointer;
	font-size: 12.5px; text-align: left;
}
.aipb-sb-fontbtn:hover { border-color: var(--dim); }
.aipb-sb-fontbtn.is-ghost { color: var(--dim); }
.aipb-sb-fontbtn.is-token { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.aipb-sb-fontname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- The tokens menu ---- */
.aipb-sb-pophead {
	padding: 5px 8px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
	color: var(--dim); font-family: inherit;
}
.aipb-sb-popsep { height: 1px; background: var(--border); margin: 4px 0; }
.aipb-sb-popempty { padding: 4px 8px 8px; font-size: 11px; color: var(--dim); line-height: 1.5; font-family: inherit; }
.aipb-sb-popempty a { color: var(--accent); }
.aipb-sb-popi.active { background: var(--accent-soft); color: var(--accent); }
.aipb-sb-popfree { padding: 4px 6px; }
.aipb-sb-popfree input { width: 100%; font-size: 11px !important; }

.aipb-sb-tkprev {
	flex: 0 0 34px; width: 34px; height: 22px; border-radius: 5px; background: var(--muted);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.aipb-sb-tkprev.is-color { background-size: 8px 8px; }
.aipb-sb-tkbar { height: 6px; border-radius: 999px; background: var(--accent); min-width: 2px; }
.aipb-sb-tksq { width: 18px; height: 18px; background: var(--bg); border: 1px solid var(--border); }
.aipb-sb-tkaa { font-size: 13px; line-height: 1; color: var(--text); }
.aipb-sb-pop .aipb-sb-tkname { font-family: inherit; font-size: 11.5px; }
.aipb-sb-pop .aipb-sb-tkval { margin-left: auto; }

.aipb-sb-fonti { align-items: center; }
.aipb-sb-fontcol { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aipb-sb-fontprev {
	font-size: 13px; color: var(--dim); line-height: 1.2;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.aipb-sb-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--muted); border-radius: 8px; }
.aipb-sb-segb {
	border: none; background: transparent; color: var(--dim);
	border-radius: 6px; padding: 3px 8px; font-size: 11.5px; cursor: pointer; line-height: 1.5;
}
.aipb-sb-segb:hover:not(:disabled) { color: var(--text); }
.aipb-sb-segb.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.aipb-sb-segb:disabled { opacity: .4; cursor: not-allowed; }

/* The colour chip in the row: the chequerboard underneath makes transparency readable. */
.aipb-sb-colorbtn {
	display: flex; align-items: center; gap: 7px; width: 100%;
	border: 1px solid var(--border); background: var(--bg); color: var(--text);
	border-radius: 7px; padding: 3px 7px 3px 3px; min-height: 26px; cursor: pointer;
	font-size: 11.5px; text-align: left;
}
.aipb-sb-colorbtn:hover { border-color: var(--dim); }
.aipb-sb-colorbtn.is-ghost { color: var(--dim); }
.aipb-sb-colorval { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.aipb-sb-swatch, .aipb-cp-chip {
	flex: 0 0 auto; border-radius: 5px; border: 1px solid var(--border);
	background-color: #fff;
	background-image: linear-gradient(45deg, #d8dae0 25%, transparent 25%, transparent 75%, #d8dae0 75%),
		linear-gradient(45deg, #d8dae0 25%, transparent 25%, transparent 75%, #d8dae0 75%);
	background-size: 8px 8px; background-position: 0 0, 4px 4px;
}
.aipb-sb-swatch { width: 20px; height: 20px; }
.aipb-sb-swatch.is-empty, .aipb-cp-chip.is-empty { background-image: none, none; background-color: transparent; }

/* ---- The colour window ---- */

.aipb-cp-back {
	position: fixed; inset: 0; z-index: 100002;
	background: rgba(16, 24, 40, .45);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.aipb-cp {
	width: 340px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column;
	background: var(--bg); color: var(--text);
	border-radius: 14px; box-shadow: 0 20px 60px rgba(16, 24, 40, .28);
	overflow: hidden;
}
.aipb-cp-head {
	display: flex; align-items: center; gap: 8px;
	padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.aipb-cp-title { font-size: 13px; font-weight: 650; flex: 1; }
.aipb-cp-x {
	border: none; background: transparent; color: var(--dim);
	font-size: 19px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px;
}
.aipb-cp-x:hover { background: var(--muted); color: var(--text); }
.aipb-cp-body { padding: 12px 14px 14px; overflow-y: auto; }
.aipb-cp-sect {
	font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim);
	margin: 12px 0 6px;
}
.aipb-cp-sect:first-child { margin-top: 0; }
.aipb-cp-none { font-size: 11.5px; color: var(--dim); line-height: 1.5; margin: 0; }
.aipb-cp-none a { color: var(--accent); }

.aipb-cp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.aipb-cp-sw {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	border: 1px solid transparent; background: transparent;
	border-radius: 9px; padding: 5px 3px; cursor: pointer; min-width: 0;
}
.aipb-cp-sw:hover { background: var(--muted); }
.aipb-cp-sw.active { border-color: var(--accent); background: var(--accent-soft); }
.aipb-cp-chip { width: 100%; height: 30px; border-radius: 7px; }
.aipb-cp-swname {
	font-size: 9.5px; color: var(--dim); max-width: 100%;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.aipb-cp-sv {
	position: relative; height: 132px; margin-top: 2px; border-radius: 9px; cursor: crosshair;
	background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
		linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
	border: 1px solid var(--border);
}
.aipb-cp-hue, .aipb-cp-alpha {
	position: relative; height: 12px; margin-top: 12px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--border);
}
.aipb-cp-hue {
	background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.aipb-cp-alpha {
	background-color: #fff;
	background-image: linear-gradient(45deg, #d8dae0 25%, transparent 25%, transparent 75%, #d8dae0 75%),
		linear-gradient(45deg, #d8dae0 25%, transparent 25%, transparent 75%, #d8dae0 75%);
	background-size: 8px 8px; background-position: 0 0, 4px 4px;
}
.aipb-cp-alphafill { position: absolute; inset: 0; border-radius: 999px; }
.aipb-cp-dot {
	position: absolute; width: 14px; height: 14px; border-radius: 50%;
	border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(16, 24, 40, .3), 0 1px 3px rgba(16, 24, 40, .3);
	transform: translate(-50%, -50%); pointer-events: none;
}
.aipb-cp-hue .aipb-cp-dot, .aipb-cp-alpha .aipb-cp-dot { top: 50%; }

.aipb-cp-row { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.aipb-cp-k { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.aipb-cp-hex, .aipb-cp-opa {
	border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text);
	font-size: 12px; padding: 5px 7px; min-height: 28px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.aipb-cp-hex { flex: 1; min-width: 0; }
.aipb-cp-opa { width: 68px; padding-left: 6px; padding-right: 2px; }
.aipb-cp-hex:focus, .aipb-cp-opa:focus { outline: none; border-color: var(--accent); }

.aipb-cp-foot {
	display: flex; align-items: center; gap: 8px;
	padding: 11px 14px; border-top: 1px solid var(--border); background: var(--muted);
}
.aipb-cp-spacer { flex: 1; }
.aipb-cp-btn {
	border: 1px solid var(--border); background: var(--bg); color: var(--text);
	border-radius: 8px; padding: 6px 13px; font-size: 12px; cursor: pointer;
}
.aipb-cp-btn:hover { border-color: var(--dim); }
.aipb-cp-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.aipb-cp-btn.primary:hover { filter: brightness(1.06); }

.aipb-sb-box { display: flex; gap: 5px; align-items: stretch; }
.aipb-sb-boxgrid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
	flex: 1; min-width: 0; padding: 2px;
	border: 1px solid var(--border); border-radius: 8px; background: var(--muted);
}
.aipb-sb-boxgrid:focus-within { border-color: var(--accent); }
.aipb-sb-cell { display: flex; align-items: center; gap: 2px; min-width: 0; background: var(--bg); border-radius: 6px; padding-left: 4px; }
.aipb-sb-cellk { flex: 0 0 auto; font-size: 10px; color: #b6bac3; line-height: 1; }
.aipb-sb-cell .aipb-sb-num {
	border: none !important; background: transparent !important;
	padding: 3px 2px !important; text-align: center; font-size: 11px !important; min-height: 22px !important;
}
.aipb-sb-cell .aipb-sb-num:focus { box-shadow: none; }
.aipb-sb-cell .aipb-sb-num::-webkit-inner-spin-button { display: none; }
.aipb-sb-link {
	flex: 0 0 auto; border: 1px solid var(--border); background: var(--bg); color: var(--dim);
	border-radius: 7px; width: 26px; height: 26px; cursor: pointer; font-size: 11px;
}
.aipb-sb-link.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.aipb-sb-range { display: flex; align-items: center; gap: 6px; }
.aipb-sb-range input { flex: 1; min-width: 0; accent-color: var(--accent); }
.aipb-sb-rv { flex: 0 0 30px; font-size: 11px; color: var(--dim); text-align: right; }

/* The context menu (tokens, colours, other rules) */
.aipb-sb-pop {
	position: fixed; z-index: 100001; min-width: 168px; max-width: 300px; max-height: 320px;
	overflow-y: auto; background: var(--bg); border: 1px solid var(--border);
	border-radius: 10px; box-shadow: var(--shadow); padding: 4px;
}
.aipb-sb-popi {
	display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
	border: none; background: transparent; color: var(--text);
	padding: 6px 8px; border-radius: 7px; font-size: 11.5px; cursor: pointer;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.aipb-sb-popi:hover { background: var(--muted); }
.aipb-sb-popsw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border); flex: 0 0 auto; }

.aipb-sb-foot { padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--border); }
.aipb-sb-hint { font-size: 10.5px; color: var(--dim); line-height: 1.5; }
.aipb-sb-clear {
	width: 100%; border: 1px solid var(--border); background: var(--bg); color: #b91c1c;
	border-radius: 8px; padding: 6px 10px; font-size: 11.5px; cursor: pointer;
}
.aipb-sb-clear:hover { border-color: #b91c1c; background: #fef2f2; }

/* A segment that is "active" only because it is the computed value: half lit, like the grey fields. */
.aipb-sb-segb.active.is-ghost { background: rgba(16, 24, 40, .04); color: var(--dim); box-shadow: none; }

/* «This change is not visible»: the warning the panel cannot afford to keep quiet about. */
.aipb-sb-weak {
	margin: -4px 0 10px; padding: 8px 10px;
	background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px;
	font-size: 11px; line-height: 1.5; color: #92400e;
}
.aipb-sb-weakline + .aipb-sb-weakline { margin-top: 4px; }
.aipb-sb-weakwho { opacity: .85; }
.aipb-sb-weakfix {
	margin-top: 7px; width: 100%;
	border: 1px solid #f59e0b; background: #fff; color: #92400e;
	border-radius: 7px; padding: 5px 9px; font-size: 11px; cursor: pointer; font-weight: 600;
}
.aipb-sb-weakfix:hover { background: #fef3c7; }
.aipb-sb-rowwarn {
	flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
	background: #f59e0b; color: #fff;
	font-size: 9px; font-weight: 700; line-height: 13px; text-align: center; cursor: help;
}
.aipb-sb-row.is-weak .aipb-sb-lab { color: #92400e; }

/* ---------------- The ancestors' breadcrumbs ---------------- */
.aipb-sb-chain {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1px;
	margin-bottom: 8px; padding: 3px 4px;
	background: var(--muted); border-radius: 8px;
}
.aipb-sb-chb {
	border: none; background: transparent; color: var(--dim);
	border-radius: 5px; padding: 2px 5px; cursor: pointer;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
	max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aipb-sb-chb:hover { background: var(--bg); color: var(--text); }
.aipb-sb-chb.active { color: var(--accent); font-weight: 600; }
.aipb-sb-chsep { color: var(--border); font-size: 11px; }

/* ---------------- Copy style / Hook up ---------------- */
.aipb-sb-clip { display: flex; gap: 6px; margin-bottom: 8px; }
.aipb-sb-clipbtn {
	flex: 1; border: 1px solid var(--border); background: var(--bg); color: var(--text);
	border-radius: 8px; padding: 5px 8px; font-size: 11.5px; cursor: pointer;
}
.aipb-sb-clipbtn:hover:not(:disabled) { border-color: var(--dim); }
.aipb-sb-clipbtn:disabled { color: var(--dim); cursor: default; opacity: .6; }

.aipb-sb-tokenize {
	display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
	margin-bottom: 8px;
	border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
	border-radius: 8px; padding: 6px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.aipb-sb-tokenize:hover { filter: brightness(.97); }

/* ---------------- The «Hook up to the design system» window ---------------- */
.aipb-tz { width: 480px; }
.aipb-tz-lead { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--dim); }
.aipb-tz-count {
	font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
	color: var(--dim); margin-bottom: 6px;
}
.aipb-tz-list { display: flex; flex-direction: column; gap: 2px; }
.aipb-tz-row {
	display: flex; align-items: flex-start; gap: 9px;
	padding: 7px 8px; border-radius: 8px; cursor: pointer;
}
.aipb-tz-row:hover { background: var(--muted); }
.aipb-tz-row input { margin-top: 2px; accent-color: var(--accent); }
.aipb-tz-mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.aipb-tz-where { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.aipb-tz-where code {
	font-size: 11px; color: var(--text);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.aipb-tz-prop { font-size: 10.5px; color: var(--dim); }
.aipb-tz-media {
	font-size: 9.5px; color: var(--dim);
	border: 1px dashed var(--border); border-radius: 999px; padding: 0 5px;
}
.aipb-tz-swap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.aipb-tz-swap code {
	font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aipb-tz-swap .was { color: var(--dim); text-decoration: line-through; }
.aipb-tz-swap .now { color: var(--accent); font-weight: 600; }
.aipb-tz-swap .arr { color: var(--dim); font-size: 11px; }
.aipb-tz-swap .aipb-sb-swatch { width: 14px; height: 14px; }

/* ---------------- The overflow warning ---------------- */
.aipb-ovbar {
	position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 30;
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 8px 12px; border-radius: 10px;
	background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
	box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
	font-size: 11.5px;
}
.aipb-ovico { font-size: 13px; }
.aipb-ovlbl { font-weight: 600; }
.aipb-ovitem {
	display: inline-flex; align-items: baseline; gap: 6px;
	border: 1px solid #f59e0b; background: #fff; color: #92400e;
	border-radius: 999px; padding: 2px 9px; font-size: 11px; cursor: pointer;
}
.aipb-ovitem:hover { background: #fef3c7; }
.aipb-ovitem code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }
.aipb-ovitem .px { font-weight: 600; }

/* ----------------------------- The Checks tab -------------------------- */
/* The problems the checks found. They used to be in the chat, where they scrolled away and buried
   the conversation on the way: here they stay until they are fixed, which is their real behaviour —
   they are a state of the page, not an event. */
.aipb-checks { position: absolute; inset: 0; overflow: auto; padding: 12px; }
.aipb-checks-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.aipb-checks-title { font-size: 13px; font-weight: 600; color: var(--text); }
.aipb-checks-sub { margin: 0 0 12px; font-size: 12px; color: var(--dim); line-height: 1.5; }

.aipb-checks-group { border: 1px solid var(--border); border-radius: 12px; background: #fff; margin-bottom: 10px; overflow: hidden; }
.aipb-checks-sec {
	padding: 8px 12px;
	background: var(--muted);
	border-bottom: 1px solid var(--border);
	font-size: 12px; font-weight: 600; color: var(--text);
}
.aipb-checks-sec.clickable { cursor: pointer; }
.aipb-checks-sec.clickable:hover { background: var(--accent-soft); color: var(--accent); }

.aipb-check-item { display: flex; gap: 8px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.aipb-check-item + .aipb-check-item { border-top: 1px solid var(--border); }
.aipb-check-ico { flex: none; color: var(--dim); font-weight: 700; }
.aipb-check-item.grave .aipb-check-ico { color: #b42318; }
.aipb-check-txt { min-width: 0; }

/* The credits counter (the top bar). Neutral while there is room; it lights up as the ceiling
   approaches, because once the quota is spent the service REFUSES generations (402), and noticing
   that from the failures is the mute defect we want to avoid. */
.aipb-usage.quasi { color: #b45309; font-weight: 600; }
.aipb-usage.esaurito { color: #b42318; font-weight: 600; }
