/* ============================================================
   miniOrange AI Agent — React admin UI styles
   Forked from Linear-Inspired Design System, flipped to light.
   Scoped under .moai-react-root so it does not leak into the
   rest of WP admin.
   ============================================================ */

@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

.moai-react-root {
	/* ---------- Canvas layers (light) ---------- */
	--page: #ffffff;
	--canvas: #fafbfc;
	--panel: #f7f8f8;
	--surface: #ffffff;
	--surface-hover: #f3f4f5;
	--surface-sunken: #fafbfc;
	--surface-elevated: #ffffff;

	/* ---------- Translucent overlays on light ---------- */
	--tint-1: rgba(15, 17, 17, 0.02);
	--tint-2: rgba(15, 17, 17, 0.04);
	--tint-3: rgba(15, 17, 17, 0.06);
	--tint-4: rgba(15, 17, 17, 0.08);

	/* ---------- Text / foreground (inverted) ---------- */
	--fg-1: #0a0c10;
	--fg-2: #3a3f47;
	--fg-3: #6b7280;
	--fg-4: #9aa1ad;
	--fg-on-accent: #ffffff;

	/* ---------- Brand & accent ---------- */
	--indigo: #5e6ad2;
	--indigo-2: #7170ff;
	--indigo-hover: #4f5ac4;
	--indigo-tint: rgba(94, 106, 210, 0.10);
	--indigo-tint-2: rgba(94, 106, 210, 0.06);
	--indigo-border: rgba(94, 106, 210, 0.22);

	--orange: #ff6b1a;
	--orange-deep: #e85d10;
	--orange-tint: rgba(255, 107, 26, 0.10);
	--orange-border: rgba(255, 107, 26, 0.28);

	/* ---------- Status ---------- */
	--green: #10a35a;
	--green-tint: rgba(16, 163, 90, 0.10);
	--green-border: rgba(16, 163, 90, 0.25);
	--amber: #d97706;
	--amber-tint: rgba(217, 119, 6, 0.10);
	--amber-border: rgba(217, 119, 6, 0.25);
	--red: #dc2626;
	--red-tint: rgba(220, 38, 38, 0.10);
	--red-border: rgba(220, 38, 38, 0.25);
	--blue: #0284c7;
	--blue-tint: rgba(2, 132, 199, 0.08);
	--blue-border: rgba(2, 132, 199, 0.22);

	/* ---------- Borders (light) ---------- */
	--border-subtle: rgba(15, 17, 17, 0.06);
	--border: rgba(15, 17, 17, 0.09);
	--border-strong: rgba(15, 17, 17, 0.14);
	--border-solid: #e6e6e6;

	/* ---------- Radii ---------- */
	--r-1: 4px;
	--r-2: 6px;
	--r-3: 8px;
	--r-4: 10px;
	--r-5: 12px;
	--r-6: 16px;
	--r-pill: 9999px;

	/* ---------- Shadows ---------- */
	--shadow-xs: 0 1px 0 rgba(15,17,17,0.03);
	--shadow-sm: 0 1px 2px rgba(15,17,17,0.04), 0 0 0 1px rgba(15,17,17,0.04);
	--shadow-md: 0 1px 2px rgba(15,17,17,0.04), 0 4px 12px rgba(15,17,17,0.04);
	--shadow-lg: 0 4px 12px rgba(15,17,17,0.06), 0 16px 32px rgba(15,17,17,0.06);
	--shadow-focus: 0 0 0 3px rgba(94,106,210,0.18);
	--shadow-ring: 0 0 0 1px rgba(15,17,17,0.06);

	/* ---------- Typography ---------- */
	--font-sans: "Inter Variable","Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
	--font-mono: "JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
	--font-features: "cv01","ss03";

	--row-h: 36px;
	--pad-x: 16px;

	/* Page layout rhythm (tighter default) */
	--page-pad-y: 16px;
	--page-pad-x: 20px;
	--page-pad-bottom: 24px;
	--page-gap: 10px;
	--card-pad: 14px;
	--card-pad-sm: 10px;
}

/* Density variants */
.moai-react-root[data-density="compact"]     { --row-h: 32px; --pad-x: 12px; }
.moai-react-root[data-density="cozy"]        { --row-h: 40px; --pad-x: 16px; }
.moai-react-root[data-density="comfortable"] { --row-h: 48px; --pad-x: 20px; }

/* Root + reset for the React UI subtree only. */
.moai-react-root {
	background: var(--page);
	color: var(--fg-1);
	font-family: var(--font-sans);
	font-feature-settings: var(--font-features);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-size: 14px;
	line-height: 1.5;
}
.moai-react-root *,
.moai-react-root *::before,
.moai-react-root *::after {
	box-sizing: border-box;
	font-feature-settings: var(--font-features);
}

/* Neutralize WP-admin h1/h2/p/button defaults inside the SPA. */
.moai-react-root h1,
.moai-react-root h2,
.moai-react-root h3,
.moai-react-root h4,
.moai-react-root p,
.moai-react-root ul,
.moai-react-root ol {
	margin: 0;
	padding: 0;
}
.moai-react-root ul,
.moai-react-root ol { list-style: none; }
.moai-react-root button {
	font-family: inherit;
}
.moai-react-root a {
	color: var(--indigo);
	text-decoration: none;
}
.moai-react-root input,
.moai-react-root select,
.moai-react-root textarea {
	font-family: inherit;
	color: inherit;
}

/* ============================================================
   Type roles
   ============================================================ */
.moai-react-root .t-display  { font-size: 32px; font-weight: 510; line-height: 1.12; letter-spacing: -0.704px; color: var(--fg-1); }
.moai-react-root .t-h1       { font-size: 24px; font-weight: 590; line-height: 1.25; letter-spacing: -0.4px;   color: var(--fg-1); }
.moai-react-root .t-h2       { font-size: 20px; font-weight: 590; line-height: 1.3;  letter-spacing: -0.28px;  color: var(--fg-1); }
.moai-react-root .t-h3       { font-size: 16px; font-weight: 590; line-height: 1.4;  letter-spacing: -0.16px;  color: var(--fg-1); }
.moai-react-root .t-body     { font-size: 14px; font-weight: 400; line-height: 1.5;  color: var(--fg-2); }
.moai-react-root .t-body-md  { font-size: 14px; font-weight: 510; line-height: 1.4;  color: var(--fg-1); }
.moai-react-root .t-small    { font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--fg-3); }
.moai-react-root .t-small-md { font-size: 13px; font-weight: 510; line-height: 1.4;  color: var(--fg-2); }
.moai-react-root .t-label    { font-size: 12px; font-weight: 510; line-height: 1.4;  color: var(--fg-3); }
.moai-react-root .t-micro    { font-size: 11px; font-weight: 510; line-height: 1.4;  color: var(--fg-3); letter-spacing: 0.2px; }
.moai-react-root .t-overline { font-size: 11px; font-weight: 510; line-height: 1.4;  color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.6px; }
.moai-react-root .mono       { font-family: var(--font-mono); font-feature-settings: normal; }

/* ============================================================
   Reusable atoms
   ============================================================ */
.moai-react-root .card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-5);
	box-shadow: var(--shadow-xs);
}
.moai-react-root .card-quiet {
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-4);
}

.moai-react-root .btn {
	display: inline-flex; align-items: center; gap: 6px;
	height: 30px; padding: 0 12px;
	border-radius: var(--r-2);
	font: 510 13px/1 var(--font-sans);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--fg-1);
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
	white-space: nowrap;
}
.moai-react-root .btn:hover { background: var(--surface-hover); }
.moai-react-root .btn:disabled,
.moai-react-root .btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}
.moai-react-root .btn-primary {
	background: var(--indigo);
	color: var(--fg-on-accent);
	border-color: var(--indigo);
}
.moai-react-root .btn-primary:hover { background: var(--indigo-hover); border-color: var(--indigo-hover); }
.moai-react-root .btn-ghost {
	background: transparent;
	border-color: transparent;
	color: var(--fg-2);
}
.moai-react-root .btn-ghost:hover { background: var(--tint-2); color: var(--fg-1); }
.moai-react-root .btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }
.moai-react-root .btn-icon { width: 30px; padding: 0; justify-content: center; }
.moai-react-root .btn-icon.btn-sm { width: 26px; }

.moai-react-root .input {
	height: 32px;
	border: 1px solid var(--border);
	border-radius: var(--r-2);
	background: var(--surface);
	padding: 0 10px;
	font: 400 13px/1 var(--font-sans);
	color: var(--fg-1);
	outline: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.moai-react-root .input:focus { border-color: var(--indigo); box-shadow: var(--shadow-focus); }
.moai-react-root .input::placeholder { color: var(--fg-4); }

.moai-react-root .pill {
	display: inline-flex; align-items: center; gap: 5px;
	height: 22px; padding: 0 8px;
	border-radius: var(--r-pill);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--fg-2);
	font: 510 11.5px/1 var(--font-sans);
}
.moai-react-root .pill-indigo { background: var(--indigo-tint); color: var(--indigo);      border-color: var(--indigo-border); }
.moai-react-root .pill-orange { background: var(--orange-tint); color: var(--orange-deep); border-color: var(--orange-border); }
.moai-react-root .pill-green  { background: var(--green-tint);  color: var(--green);       border-color: var(--green-border); }
.moai-react-root .pill-amber  { background: var(--amber-tint);  color: var(--amber);       border-color: var(--amber-border); }
.moai-react-root .pill-red    { background: var(--red-tint);    color: var(--red);         border-color: var(--red-border); }
.moai-react-root .pill-blue   { background: var(--blue-tint);   color: var(--blue);        border-color: var(--blue-border); }
.moai-react-root .pill-muted  { background: var(--panel);       color: var(--fg-3);        border-color: var(--border); }

.moai-react-root .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.moai-react-root .dot-green  { background: var(--green);  box-shadow: 0 0 0 2px var(--green-tint); }
.moai-react-root .dot-amber  { background: var(--amber);  box-shadow: 0 0 0 2px var(--amber-tint); }
.moai-react-root .dot-red    { background: var(--red);    box-shadow: 0 0 0 2px var(--red-tint); }
.moai-react-root .dot-blue   { background: var(--blue);   box-shadow: 0 0 0 2px var(--blue-tint); }
.moai-react-root .dot-indigo { background: var(--indigo); box-shadow: 0 0 0 2px var(--indigo-tint); }
.moai-react-root .dot-muted  { background: var(--fg-4); }

.moai-react-root .kbd {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: var(--r-1);
	background: var(--surface);
	border: 1px solid var(--border);
	font: 510 11px/1 var(--font-mono);
	color: var(--fg-3);
}

/* Scrollbar */
.moai-react-root ::-webkit-scrollbar { width: 10px; height: 10px; }
.moai-react-root ::-webkit-scrollbar-track { background: transparent; }
.moai-react-root ::-webkit-scrollbar-thumb { background: var(--tint-3); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.moai-react-root ::-webkit-scrollbar-thumb:hover { background: var(--tint-4); }

/* Animated dashes for live execution */
@keyframes moai-flow-dash { to { stroke-dashoffset: -24; } }
.moai-react-root .flow-line { stroke-dasharray: 6 6; animation: moai-flow-dash 1.2s linear infinite; }

@keyframes moai-pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.moai-react-root .pulse { animation: moai-pulse-soft 1.6s ease-in-out infinite; }

@keyframes moai-spin { to { transform: rotate(360deg); } }
.moai-react-root .spin { animation: moai-spin 1s linear infinite; }

.moai-react-root .focusable:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---------- Execution flow / simulator helpers ---------- */
/* Moving dashes along the active execution edge (distinct from .flow-line). */
@keyframes moai-exec-dash { to { stroke-dashoffset: -28; } }
.moai-react-root .flow-dash { stroke-dasharray: 5 7; animation: moai-exec-dash 0.7s linear infinite; }

/* Speed segmented control (1x / 2x / 4x). */
.moai-react-root .seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-2); }
.moai-react-root .seg > button { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: none; background: transparent; border-radius: var(--r-1); font-size: 12px; font-weight: 510; color: var(--fg-3); cursor: pointer; }
.moai-react-root .seg > button:hover { color: var(--fg-1); }
.moai-react-root .seg > button.is-active { background: var(--surface); color: var(--fg-1); box-shadow: var(--shadow-xs); }

/* Three-dot "typing" indicator used in test/contextual cards. */
.moai-react-root .typing { display: inline-flex; align-items: center; gap: 3px; }
.moai-react-root .typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-4); animation: moai-typing 1.1s ease-in-out infinite; }
.moai-react-root .typing i:nth-child(2) { animation-delay: 0.18s; }
.moai-react-root .typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes moai-typing { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* Streaming caret for the test chat. */
.moai-react-root .caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--fg-3); animation: moai-blink 1s step-end infinite; }
@keyframes moai-blink { 50% { opacity: 0; } }

/* Entrance animations — rest at full opacity, animate transform only
   (avoids the invisible-content / containing-block bugs from the design iterations). */
@keyframes moai-fade-up { from { transform: translateY(8px); } to { transform: translateY(0); } }
@keyframes moai-fade-in { from { transform: scale(0.98); } to { transform: scale(1); } }
.moai-react-root .fade-up { animation: moai-fade-up 260ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.moai-react-root .fade-in { animation: moai-fade-in 200ms cubic-bezier(0.2, 0.7, 0.3, 1); }

.moai-react-root .row    { display: flex; align-items: center; }
.moai-react-root .col    { display: flex; flex-direction: column; }
.moai-react-root .gap-1  { gap: 4px; }
.moai-react-root .gap-2  { gap: 8px; }
.moai-react-root .gap-3  { gap: 12px; }
.moai-react-root .gap-4  { gap: 16px; }
.moai-react-root .gap-5  { gap: 20px; }
.moai-react-root .gap-6  { gap: 24px; }
.moai-react-root .grow   { flex: 1 1 0; min-width: 0; }
.moai-react-root .none   { flex: none; }
.moai-react-root .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Shared page shells */
.moai-react-root .moai-page-shell {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--page-pad-y) var(--page-pad-x) var(--page-pad-bottom);
	box-sizing: border-box;
}
.moai-react-root .moai-page-shell--stack {
	display: flex;
	flex-direction: column;
	gap: var(--page-gap);
}
.moai-react-root .moai-page-shell--grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 288px;
	gap: 14px;
}

/* Modals */
.moai-react-root .moai-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(15, 17, 17, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}
.moai-react-root .moai-tools-picker-modal {
	width: 100%;
	max-width: min(1040px, 96vw);
	max-height: min(92vh, 880px);
	background: var(--page);
	border: 1px solid var(--border);
	border-radius: var(--r-5);
	box-shadow: var(--shadow-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Assigned tools list (agent abilities tab) */
.moai-react-root .moai-assigned-tools-card .moai-assigned-tools-header {
	padding: 8px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--border-subtle);
}
.moai-react-root .moai-assigned-tool-row {
	display: grid;
	grid-template-columns: 28px 1fr auto 28px;
	gap: 10px;
	padding: 8px 14px;
	align-items: center;
}
.moai-react-root .moai-assigned-tool-row + .moai-assigned-tool-row {
	border-top: 1px solid var(--border-subtle);
}
.moai-react-root .moai-summary-card {
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ============================================================
   Host adaptations: collapse WP admin chrome padding around the SPA.
   Matches both the top-level page (toplevel_page_moaiagent-app) and
   each submenu page (admin_page_moaiagent-app-<route>), via the
   shared body class prefix WordPress emits.
   ============================================================ */

body[class*="page_moaiagent-app"] #wpcontent,
body[class*="page_moaiagent-app"] #wpbody-content {
	padding-left: 0;
}
body[class*="page_moaiagent-app"] #wpbody-content {
	padding-bottom: 0;
}
body[class*="page_moaiagent-app"] #wpbody-content > .wrap {
	margin: 0;
	padding: 0;
	max-width: none;
}
body[class*="page_moaiagent-app"] {
	overflow: hidden;
}

body[class*="page_moaiagent-app"] #wpbody,
body[class*="page_moaiagent-app"] #wpbody-content {
	overflow: hidden;
}

body[class*="page_moaiagent-app"] .moai-react-mount {
	margin: 0;
	padding: 0;
	background: #f0f0f1;
	height: calc(100vh - 32px);
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

body[class*="page_moaiagent-app"] .moai-react-mount #root {
	flex: 1;
	min-height: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

body[class*="page_moaiagent-app"] #wpfooter {
	display: none;
}

@media screen and (max-width: 782px) {
	body[class*="page_moaiagent-app"] .moai-react-mount {
		height: calc(100vh - 46px);
	}
}

/* WP chrome shell — full-height flex column for chat route */
.moai-react-root .moai-wp-chrome {
	min-height: 0;
	height: 100%;
	flex: 1;
	display: flex;
	padding: 20px;
	box-sizing: border-box;
	background: #f0f0f1;
}

.moai-react-root .moai-wp-chrome--chat {
	padding: 12px 16px 16px;
}

.moai-react-root .moai-wp-chrome__panel {
	flex: 1;
	min-height: 0;
	min-width: 0;
	background: var(--page);
	color: var(--fg-1);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(15, 17, 17, 0.04);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.moai-react-root .moai-chat-page {
	flex: 1;
	min-height: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.moai-react-root .moai-chat-page__body {
	flex: 1;
	min-height: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ---------- Chat @ mention menu (Cursor-style) ---------- */
.moai-react-root .moaiagent-mention-menu {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: calc(100% + 8px);
	z-index: 20;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 17, 17, 0.12));
	padding: 6px 0;
	max-height: 280px;
	overflow: auto;
}

.moai-react-root .moaiagent-mention-menu__label {
	padding: 6px 12px 4px;
	font-size: 11px;
	font-weight: 510;
	color: var(--fg-3);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.moai-react-root .moaiagent-mention-menu__empty {
	padding: 10px 12px;
	font-size: 13px;
	color: var(--fg-3);
}

.moai-react-root .moaiagent-mention-menu__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 12px;
	border: none;
	background: transparent;
	text-align: left;
	cursor: pointer;
	font-family: var(--font-sans);
}

.moai-react-root .moaiagent-mention-menu__item:hover,
.moai-react-root .moaiagent-mention-menu__item.is-active {
	background: var(--tint-2);
}

.moai-react-root .moaiagent-mention-menu__glyph {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.moai-react-root .moaiagent-mention-menu__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.moai-react-root .moaiagent-mention-menu__name {
	font-size: 13px;
	font-weight: 510;
	color: var(--fg-1);
}

.moai-react-root .moaiagent-mention-menu__meta {
	font-size: 11.5px;
	color: var(--fg-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Composer: single contenteditable field with inline agent chip (Cursor-style) */
.moai-react-root .moaiagent-composer-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 60px;
	max-height: 220px;
	overflow-y: auto;
	padding: 8px 10px;
	cursor: text;
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--fg-1);
	background: transparent;
	border: none;
	outline: none;
	white-space: pre-wrap;
	word-break: break-word;
}

.moai-react-root .moaiagent-composer-input:focus {
	outline: none;
}

.moai-react-root .moaiagent-composer-input[data-show-placeholder="true"]:empty::before {
	content: attr(data-placeholder);
	color: var(--fg-3);
	pointer-events: none;
}

.moai-react-root .moaiagent-mention-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	vertical-align: baseline;
	max-width: calc(100% - 8px);
	margin: 0 4px 2px 0;
	padding: 2px 6px 2px 4px;
	border-radius: 6px;
	background: var(--indigo-tint);
	border: 1px solid var(--indigo-border);
	color: var(--indigo);
	font-size: 14px;
	font-weight: 510;
	line-height: 1.35;
	user-select: none;
}

.moai-react-root .moaiagent-mention-chip__glyph {
	width: 22px;
	height: 22px;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
}

.moai-react-root .moaiagent-mention-chip__label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}

.moai-react-root .moaiagent-mention-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 2px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--indigo);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
}

.moai-react-root .moaiagent-mention-chip__remove:hover {
	opacity: 1;
	background: rgba(94, 106, 210, 0.15);
}

/* ---------- Chat layout (Cursor / ChatGPT style) ---------- */
.moai-react-root .moai-chat-layout {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
	background: var(--page);
}

.moai-react-root .moai-chat-layout__header {
	flex: none;
	padding: 10px 20px;
	border-bottom: 1px solid var(--border-subtle);
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.moai-react-root .moai-chat-messages,
.moai-react-root .moaiagent-chat-scroll {
	flex: 1;
	min-height: 0;
	min-width: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 16px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.moai-react-root .moaiagent-chat-column {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	box-sizing: border-box;
	min-width: 0;
}

.moai-react-root .moai-chat-input,
.moai-react-root .moaiagent-chat-composer-wrap {
	flex: none;
	position: sticky;
	bottom: 0;
	z-index: 10;
	background: var(--page);
	padding: 12px 16px 16px;
	border-top: 1px solid var(--border-subtle);
	min-width: 0;
}

.moai-react-root .moai-chat-input__inner {
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	box-sizing: border-box;
	min-width: 0;
}

.moai-react-root .moai-chat-input__inner .card {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.moai-react-root .moai-message,
.moai-react-root .moaiagent-chat-message__content {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: pre-wrap;
}

.moai-react-root .moai-code-block {
	display: block;
	max-width: 100%;
	margin: 0;
	padding: 10px 12px;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--fg-1);
	background: var(--surface-sunken);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	box-sizing: border-box;
}

.moai-react-root .moai-tool-call-block {
	margin-top: 10px;
	padding: 10px;
	max-width: 100%;
	overflow: hidden;
	background: var(--surface-sunken);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	box-sizing: border-box;
}

/* Rendered Markdown in chat messages (assistant + user). */
.moai-react-root .moai-markdown {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	font-size: 13px;
	line-height: 1.6;
	color: var(--fg-1);
}
.moai-react-root .moai-markdown > :first-child { margin-top: 0; }
.moai-react-root .moai-markdown > :last-child { margin-bottom: 0; }
.moai-react-root .moai-markdown p { margin: 0 0 8px; }
.moai-react-root .moai-markdown h1,
.moai-react-root .moai-markdown h2,
.moai-react-root .moai-markdown h3,
.moai-react-root .moai-markdown h4 {
	margin: 14px 0 6px;
	font-weight: 600;
	line-height: 1.3;
}
.moai-react-root .moai-markdown h1 { font-size: 18px; }
.moai-react-root .moai-markdown h2 { font-size: 16px; }
.moai-react-root .moai-markdown h3 { font-size: 14.5px; }
.moai-react-root .moai-markdown h4 { font-size: 13.5px; }
.moai-react-root .moai-markdown ul,
.moai-react-root .moai-markdown ol {
	margin: 0 0 8px;
	padding-left: 22px;
}
.moai-react-root .moai-markdown li { margin: 2px 0; }
.moai-react-root .moai-markdown a {
	color: var(--indigo);
	text-decoration: underline;
}
.moai-react-root .moai-markdown strong { font-weight: 600; }
.moai-react-root .moai-markdown code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--surface-sunken);
	border: 1px solid var(--border-subtle);
}
.moai-react-root .moai-markdown pre {
	max-width: 100%;
	margin: 0 0 8px;
	padding: 10px 12px;
	overflow-x: auto;
	background: var(--surface-sunken);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	box-sizing: border-box;
}
.moai-react-root .moai-markdown pre code {
	padding: 0;
	border: none;
	background: none;
	font-size: 12px;
	line-height: 1.5;
	white-space: pre;
}
.moai-react-root .moai-markdown blockquote {
	margin: 0 0 8px;
	padding: 2px 0 2px 12px;
	border-left: 3px solid var(--border-strong);
	color: var(--fg-2);
}
.moai-react-root .moai-markdown hr {
	border: none;
	border-top: 1px solid var(--border-subtle);
	margin: 12px 0;
}
/* GFM tables — the core reason for this feature. */
.moai-react-root .moai-markdown table {
	border-collapse: collapse;
	margin: 4px 0 10px;
	width: auto;
	max-width: 100%;
	display: block;
	overflow-x: auto;
	font-size: 12.5px;
}
.moai-react-root .moai-markdown th,
.moai-react-root .moai-markdown td {
	border: 1px solid var(--border-subtle);
	padding: 6px 10px;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
}
.moai-react-root .moai-markdown thead th {
	background: var(--surface-sunken);
	font-weight: 600;
}
.moai-react-root .moai-markdown tbody tr:nth-child(even) {
	background: var(--surface-sunken);
}

/* Per-message action toolbar (Copy / Regenerate) under assistant messages. */
.moai-react-root .moaiagent-msg-actions {
	display: flex;
	gap: 4px;
	margin-top: 8px;
	opacity: 0;
	transition: opacity 120ms ease;
}
.moai-react-root .moaiagent-chat-message:hover .moaiagent-msg-actions {
	opacity: 1;
}
.moai-react-root .moaiagent-msg-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	font-size: 11.5px;
	color: var(--fg-3);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.moai-react-root .moaiagent-msg-action-btn:hover {
	color: var(--fg-1);
	background: var(--surface-sunken);
	border-color: var(--border-subtle);
}

.moai-react-root .moaiagent-chat-error {
	padding: 10px 14px;
	border: 1px solid var(--red-border);
	background: var(--red-tint);
	color: var(--red);
	border-radius: 8px;
	font-size: 13px;
}

.moai-react-root .moaiagent-chat-message {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.moai-react-root .moaiagent-chat-message--agent {
	align-self: flex-start;
}

.moai-react-root .moaiagent-chat-message--user {
	align-self: flex-end;
	max-width: min(92%, 720px);
}

.moai-react-root .moaiagent-chat-message__row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	min-width: 0;
	max-width: 100%;
}

.moai-react-root .moaiagent-chat-message--user .moaiagent-chat-message__row {
	flex-direction: row-reverse;
}

.moai-react-root .moaiagent-chat-message__avatar {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	font-size: 12px;
	font-weight: 600;
}

.moai-react-root .moaiagent-chat-message__avatar--user {
	background: linear-gradient(135deg, #5e6ad2, #7170ff);
	color: #fff;
}

.moai-react-root .moaiagent-chat-message__avatar--agent {
	font-size: 14px;
	border: 1px solid transparent;
}

.moai-react-root .moaiagent-chat-message__body {
	min-width: 0;
	flex: 1;
}

.moai-react-root .moaiagent-chat-message__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}

.moai-react-root .moaiagent-chat-message--user .moaiagent-chat-message__meta {
	justify-content: flex-end;
}

.moai-react-root .moaiagent-chat-message__name {
	font-size: 13px;
	font-weight: 510;
	color: var(--fg-1);
}

.moai-react-root .moaiagent-chat-message__time {
	font-size: 11px;
	color: var(--fg-4);
}

.moai-react-root .moaiagent-chat-message__revert {
	height: 22px;
	padding: 0 8px;
	color: var(--fg-3);
	font-size: 11.5px;
}

.moai-react-root .moaiagent-chat-message__content {
	font-size: 14px;
	color: var(--fg-1);
	line-height: 1.6;
	min-width: 0;
	max-width: 100%;
}

.moai-react-root .moaiagent-chat-message--user .moaiagent-chat-message__content {
	text-align: right;
}

/* Inline @agent tag shown at the START of a sent user message, marking which
   agent it was directed at — mirrors the composer chip's position. */
.moai-react-root .moaiagent-mention-tag {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-right: 6px;
	padding: 2px 8px;
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 590;
	line-height: 1.4;
	white-space: nowrap;
}


/* Create-post draft action card (chat) */
.moai-react-root .moaiagent-action-card {
	margin-top: 12px;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1px solid var(--orange-border);
	background: linear-gradient(135deg, var(--orange-tint) 0%, transparent 80%);
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.moai-react-root .moaiagent-action-card--removed {
	opacity: 0.85;
}

.moai-react-root .moaiagent-action-card__head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}

.moai-react-root .moaiagent-action-card__icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: var(--orange);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
}

.moai-react-root .moaiagent-action-card__titles {
	flex: 1;
	min-width: 0;
}

.moai-react-root .moaiagent-action-card__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--fg-1);
}

.moai-react-root .moaiagent-action-card__subtitle {
	margin-top: 2px;
	font-size: 12px;
	color: var(--fg-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.moai-react-root .moaiagent-action-card__badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: #9a3412;
	background: #ffedd5;
	border: 1px solid #fed7aa;
}

.moai-react-root .moaiagent-action-card__badge--live {
	color: #166534;
	background: #dcfce7;
	border-color: #bbf7d0;
}

.moai-react-root .moaiagent-action-card__body {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 12px;
}

.moai-react-root .moaiagent-action-card__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	font-size: 12.5px;
	border-bottom: 1px solid var(--border-subtle);
}

.moai-react-root .moaiagent-action-card__row:last-child {
	border-bottom: none;
}

.moai-react-root .moaiagent-action-card__label {
	color: var(--fg-3);
}

.moai-react-root .moaiagent-action-card__value {
	color: var(--fg-1);
	font-weight: 600;
	text-align: right;
}

.moai-react-root .moaiagent-action-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.moai-react-root .moaiagent-action-card__cancel {
	color: var(--fg-3);
}

.moai-react-root .moaiagent-action-card__cancel:hover {
	color: var(--red);
	background: var(--red-tint);
}

.moai-react-root .moaiagent-action-card__removed-note,
.moai-react-root .moaiagent-action-card__live-note {
	font-size: 12px;
	font-weight: 600;
	color: var(--fg-3);
}