/* ============================================================================
   EUX Blocks — DaaS (Themed)
   ----------------------------------------------------------------------------
   "Developer-as-a-Service" section with cream / light / dark theme variants.

   Layout (.eux-daas-themed__wrap):
     ┌────────────────────────────────┬──────────────────────────────┐
     │ LEFT: editable copy + button   │ RIGHT: retainer + Slack mockup│
     └────────────────────────────────┴──────────────────────────────┘

   Visual reference: exports/daas/daas-standalone.css from the design
   package. CSS animations for the Slack messages are reproduced from
   the reference's @keyframes (daasChat1..daasChat6, daasLivePulse,
   daasTypeDot) but namespaced to `.eux-daas-themed`.

   Defensive scoping per salient-coexistence.md — every selector starts
   with `.eux-block--daas-themed`.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Section base
   -------------------------------------------------------------------------- */
.eux-block--daas-themed {
	padding-block: 96px;
}
@media (max-width: 720px) {
	.eux-block--daas-themed {
		padding-block: 64px;
	}
}

/* --------------------------------------------------------------------------
   Two-column wrap (copy left · interactive panel right)
   -------------------------------------------------------------------------- */
.eux-block--daas-themed .eux-daas-themed__wrap {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 56px;
	align-items: stretch;
}
@media (max-width: 980px) {
	.eux-block--daas-themed .eux-daas-themed__wrap {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* ==========================================================================
   LEFT COLUMN — editable copy + CTA
   ========================================================================== */
.eux-block--daas-themed .eux-daas-themed__left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 600px;
}

/* Eyebrow */
.eux-block--daas-themed .eux-daas-themed__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--eux-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eux-woo-500);
	margin: 0 0 18px;
}
/* v0.36.12 — Section-label dash. Dark theme override is added near the
   other --dark eyebrow rules further down. */
.eux-block--daas-themed .eux-daas-themed__eyebrow::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--eux-woo-500);
	flex: 0 0 28px;
}

/* Title — heading with optional <em> for purple emphasis */
.eux-block--daas-themed .eux-daas-themed__title {
	font-family: var(--eux-font-display);
	font-weight: 400;
	font-size: clamp(32px, 4vw, 50px);
	line-height: 1.04;
	letter-spacing: -0.024em;
	margin: 0 0 18px;
	text-wrap: balance;
	color: var(--eux-ink-900);
	/* Salient defends — see salient-coexistence.md defence 2 */
	word-break: normal !important;
	overflow-wrap: normal !important;
}
.eux-block--daas-themed .eux-daas-themed__title em {
	color: var(--eux-woo-500);
	font-style: normal;
}

/* Copy paragraphs */
.eux-block--daas-themed .eux-daas-themed__copy {
	font-family: var(--eux-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--eux-ink-700);
	max-width: 56ch;
	margin: 0 0 10px;
	/* v0.36.54 — Salient applies an unscoped `p { padding-bottom: 1.5em }`
	   (~24px) to every paragraph in content areas, which lands on top of
	   our margin and gives ~38px between paragraphs instead of the ~10px
	   we intend. Zero the padding so only margin controls the gap. Same
	   defensive pattern used in problem-trio (v0.36.42) and bento
	   (v0.36.23). Margin tightened from 14px → 10px to match the closer
	   rhythm "the others" use; the existing line-height 1.6 already
	   creates ~26px of inter-line spacing, so a tighter outer margin
	   keeps related paragraphs visually grouped without merging them. */
	padding-bottom: 0;
}

/* Bullet lists inside the left column — purple-dash style.
   --------------------------------------------------------------------------
   Auto-applied to ANY `core/list` (rendered as `.wp-block-list`) inside
   the left copy column. This means editors don't have to remember to add
   a special class. Whatever list they drop in there gets the dash bullet
   treatment that matches the rest of the design system (problem-trio
   cards, bento cards, etc).

   If you ever need a list WITHOUT this style in the left column, you can
   override per-instance via the editor's "Additional CSS class(es)".
   -------------------------------------------------------------------------- */
.eux-block--daas-themed .eux-daas-themed__left ul.wp-block-list,
.eux-block--daas-themed .eux-daas-themed__left ul {
	list-style: none;
	padding: 0;
	/* v0.36.53 — matches problem-trio--light spec: 6px grid gap, no bottom
	   margin (parent `__left` controls vertical rhythm). Editors who add
	   ad-hoc lists at the bottom of the left column will get the same
	   tight bullet rhythm as section-card lists, keeping the typography
	   coherent across blocks. */
	margin: 0 0 18px;
	display: grid;
	gap: 6px;
}

.eux-block--daas-themed .eux-daas-themed__left ul.wp-block-list li,
.eux-block--daas-themed .eux-daas-themed__left ul li {
	font-family: var(--eux-font-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--eux-ink-700);
	padding-left: 18px;
	position: relative;
	list-style: none;
}
.eux-block--daas-themed .eux-daas-themed__left ul.wp-block-list li::marker,
.eux-block--daas-themed .eux-daas-themed__left ul li::marker {
	content: '';
}
.eux-block--daas-themed .eux-daas-themed__left ul.wp-block-list li::before,
.eux-block--daas-themed .eux-daas-themed__left ul li::before {
	/* v0.36.53 — `top: 9px` to align bullet to first cap-line of the 13.5px
	   text. Was `top: 10px` for the old 14px font; the smaller font shifts
	   the visual centre up 1px. */
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 2px;
	background: var(--eux-woo-300);
}

/* Meta line (mono, small, "// flexible monthly...") */
.eux-block--daas-themed .eux-daas-themed__meta {
	font-family: var(--eux-font-mono);
	font-size: 11px;
	color: var(--eux-ink-500);
	margin: 18px 0 0;
}

/* Button — purple pill with arrow added via ::after */
.eux-block--daas-themed .eux-daas-themed__ctas {
	margin-top: 24px;
}
.eux-block--daas-themed .eux-daas-themed__ctas .wp-block-button {
	margin: 0;
}
.eux-block--daas-themed .wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--eux-woo-500);
	color: var(--eux-white);
	text-decoration: none;
	padding: 14px 24px;
	border-radius: 999px;
	font-family: var(--eux-font-display);
	font-size: 14px;
	font-weight: 500;
	border: 1px solid var(--eux-woo-500);
	transition:
		background var(--eux-dur-fast, 150ms) var(--eux-ease-out, ease-out),
		border-color var(--eux-dur-fast, 150ms) var(--eux-ease-out, ease-out),
		transform var(--eux-dur-fast, 150ms) var(--eux-ease-out, ease-out);
}
.eux-block--daas-themed .wp-block-button .wp-block-button__link:hover {
	background: var(--eux-woo-700);
	border-color: var(--eux-woo-700);
	transform: translateY(-1px);
}
.eux-block--daas-themed .wp-block-button .wp-block-button__link::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex-shrink: 0;
}

/* ==========================================================================
   RIGHT COLUMN — retainer card + Slack panel mockup (decorative)
   --------------------------------------------------------------------------
   v0.29.0 — the mockup is now its own draggable child block
   (eux/daas-mockup). The block-wrapper div sits in the grid cell where
   `.eux-daas-themed__right` used to sit directly; the existing __right
   styles below still apply to the inner div emitted by the preset.

   Both selectors are kept active so:
     - NEW format: .wrap > .eux-block--daas-mockup > .eux-daas-themed__right
     - OLD format (legacy render): .wrap > .eux-daas-themed__right  (no
       outer wrapper, render.php still uses the old baked path until
       editor.js's deprecated.migrate() runs).
   ========================================================================== */
.eux-block--daas-themed .eux-daas-themed__wrap > .eux-block--daas-mockup {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.eux-block--daas-themed .eux-daas-themed__right {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
}

/* --------------------------------------------------------------------------
   RETAINER CARD — usage stats, progress bar, meta blocks, log rows
   -------------------------------------------------------------------------- */
.eux-block--daas-themed .eux-daas-themed__retainer {
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 20px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-shrink: 0;
}

.eux-block--daas-themed .eux-daas-themed__retainer-num {
	font-family: var(--eux-font-display);
	font-weight: 300;
	font-size: 44px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--eux-ink-900);
	font-variant-numeric: tabular-nums;
}
.eux-block--daas-themed .eux-daas-themed__retainer-num .of {
	color: var(--eux-ink-400, #8C8C8C);
	font-size: 17px;
}
.eux-block--daas-themed .eux-daas-themed__retainer-num .u {
	color: var(--eux-woo-500);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-left: 8px;
}

.eux-block--daas-themed .eux-daas-themed__retainer-bar {
	height: 8px;
	border-radius: 99px;
	background: var(--eux-cream-50);
	overflow: hidden;
	border: 1px solid var(--eux-ink-100);
}
.eux-block--daas-themed .eux-daas-themed__retainer-bar > i {
	display: block;
	height: 100%;
	width: 62%;
	background: var(--eux-woo-500);
	border-radius: 99px;
}

.eux-block--daas-themed .eux-daas-themed__retainer-meta {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
}
.eux-block--daas-themed .eux-daas-themed__retainer-meta > div {
	background: var(--eux-cream-50);
	border: 1px solid var(--eux-ink-100);
	border-radius: 8px;
	padding: 8px 12px;
}
.eux-block--daas-themed .eux-daas-themed__retainer-meta .lbl {
	font-family: var(--eux-font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eux-ink-500, #6B6B6B);
}
.eux-block--daas-themed .eux-daas-themed__retainer-meta .val {
	font-family: var(--eux-font-display);
	font-size: 15px;
	color: var(--eux-ink-900);
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   SLACK PANEL — header, message thread, typing indicator, compose box
   -------------------------------------------------------------------------- */
.eux-block--daas-themed .eux-daas-themed__slack {
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
	flex: 0 0 auto;
}

.eux-block--daas-themed .eux-daas-themed__slack-hd {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--eux-ink-100);
	background: var(--eux-cream-50);
}
.eux-block--daas-themed .eux-daas-themed__slack-hd .hash {
	font-family: var(--eux-font-display);
	font-weight: 700;
	color: var(--eux-ink-500, #6B6B6B);
}
.eux-block--daas-themed .eux-daas-themed__slack-hd .name {
	font-family: var(--eux-font-display);
	font-size: 14px;
	font-weight: 600;
}
.eux-block--daas-themed .eux-daas-themed__slack-hd .meta {
	font-family: var(--eux-font-body);
	font-size: 11px;
	color: var(--eux-ink-500, #6B6B6B);
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Live-dot — pulses green */
.eux-block--daas-themed .eux-daas-themed__live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background: #4DC287;
	box-shadow: 0 0 0 0 rgba(77, 194, 135, 0.5);
	animation: euxDaasLivePulse 2s ease-in-out infinite;
}
@keyframes euxDaasLivePulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(77, 194, 135, 0.5); }
	50%      { box-shadow: 0 0 0 6px rgba(77, 194, 135, 0); }
}

/* Body — stable height so messages can cycle in/out without bouncing */
.eux-block--daas-themed .eux-daas-themed__slack-body {
	padding: 16px 18px 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 360px;
	min-height: 360px;
	max-height: 360px;
	overflow: hidden;
	position: relative;
	justify-content: flex-start;
}
.eux-block--daas-themed .eux-daas-themed__slack-scroll {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Each message starts collapsed (max-height: 0, opacity: 0) and gets
   animated in by its assigned @keyframes per :nth-child position. */
.eux-block--daas-themed .eux-daas-themed__slack-scroll .eux-daas-themed__msg {
	overflow: hidden;
	max-height: 0;
	margin-top: 0;
	opacity: 0;
	transform: translateY(8px);
	animation-duration: 18s;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}
.eux-block--daas-themed .eux-daas-themed__slack-scroll .eux-daas-themed__msg:nth-child(1) { animation-name: euxDaasChat1; }
.eux-block--daas-themed .eux-daas-themed__slack-scroll .eux-daas-themed__msg:nth-child(2) { animation-name: euxDaasChat2; }
.eux-block--daas-themed .eux-daas-themed__slack-scroll .eux-daas-themed__msg:nth-child(3) { animation-name: euxDaasChat3; }
.eux-block--daas-themed .eux-daas-themed__slack-scroll .eux-daas-themed__msg:nth-child(4) { animation-name: euxDaasChat4; }
.eux-block--daas-themed .eux-daas-themed__slack-scroll .eux-daas-themed__msg:nth-child(5) { animation-name: euxDaasChat5; }
.eux-block--daas-themed .eux-daas-themed__slack-scroll .eux-daas-themed__msg:nth-child(6) { animation-name: euxDaasChat6; }

@keyframes euxDaasChat1 {
	0%        { opacity: 0; max-height: 0;     margin-top: 0;    transform: translateY(8px); }
	2%        { opacity: 1; max-height: 220px; margin-top: 0;    transform: translateY(0); }
	36%       { opacity: 1; max-height: 220px; margin-top: 0;    transform: translateY(0); }
	40%       { opacity: 0; max-height: 220px; margin-top: 0;    transform: translateY(-12px); }
	44%, 100% { opacity: 0; max-height: 0;     margin-top: 0; }
}
@keyframes euxDaasChat2 {
	0%, 14%   { opacity: 0; max-height: 0;     margin-top: 0;    transform: translateY(8px); }
	17%, 50%  { opacity: 1; max-height: 220px; margin-top: 14px; transform: translateY(0); }
	54%       { opacity: 0; max-height: 220px; margin-top: 14px; transform: translateY(-12px); }
	58%, 100% { opacity: 0; max-height: 0;     margin-top: 0; }
}
@keyframes euxDaasChat3 {
	0%, 28%   { opacity: 0; max-height: 0;     margin-top: 0;    transform: translateY(8px); }
	31%, 64%  { opacity: 1; max-height: 220px; margin-top: 14px; transform: translateY(0); }
	68%       { opacity: 0; max-height: 220px; margin-top: 14px; transform: translateY(-12px); }
	72%, 100% { opacity: 0; max-height: 0;     margin-top: 0; }
}
@keyframes euxDaasChat4 {
	0%, 42%   { opacity: 0; max-height: 0;     margin-top: 0;    transform: translateY(8px); }
	45%, 92%  { opacity: 1; max-height: 220px; margin-top: 14px; transform: translateY(0); }
	96%, 100% { opacity: 0; max-height: 0;     margin-top: 0;    transform: translateY(-12px); }
}
@keyframes euxDaasChat5 {
	0%, 56%   { opacity: 0; max-height: 0;     margin-top: 0;    transform: translateY(8px); }
	59%, 92%  { opacity: 1; max-height: 220px; margin-top: 14px; transform: translateY(0); }
	96%, 100% { opacity: 0; max-height: 0;     margin-top: 0;    transform: translateY(-12px); }
}
@keyframes euxDaasChat6 {
	0%, 70%   { opacity: 0; max-height: 0;     margin-top: 0;    transform: translateY(8px); }
	73%, 92%  { opacity: 1; max-height: 220px; margin-top: 14px; transform: translateY(0); }
	96%, 100% { opacity: 0; max-height: 0;     margin-top: 0;    transform: translateY(-12px); }
}

/* Individual message structure */
.eux-block--daas-themed .eux-daas-themed__msg {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 12px;
	align-items: start;
}
.eux-block--daas-themed .eux-daas-themed__msg-av {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(166, 89, 248, 0.16); /* approximate of --woo-50 #F1E3FE */
	color: var(--eux-woo-500);
	display: grid;
	place-items: center;
	font-family: var(--eux-font-display);
	font-weight: 700;
	font-size: 13px;
}
.eux-block--daas-themed .eux-daas-themed__msg-av--client {
	background: var(--eux-ink-100);
	color: var(--eux-ink-700);
}
.eux-block--daas-themed .eux-daas-themed__msg-hd {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.eux-block--daas-themed .eux-daas-themed__msg-hd .nm {
	font-family: var(--eux-font-display);
	font-weight: 700;
	font-size: 13px;
}
.eux-block--daas-themed .eux-daas-themed__msg-hd .nm .badge {
	background: var(--eux-woo-500);
	color: var(--eux-white);
	font-size: 9px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 3px;
	margin-left: 4px;
	letter-spacing: 0.04em;
}
.eux-block--daas-themed .eux-daas-themed__msg-hd .nm .role {
	font-family: var(--eux-font-body);
	font-weight: 400;
	font-size: 11.5px;
	color: var(--eux-ink-500, #6B6B6B);
	margin-left: 6px;
}
.eux-block--daas-themed .eux-daas-themed__msg-hd .ts {
	font-family: var(--eux-font-body);
	font-size: 11px;
	color: var(--eux-ink-500, #6B6B6B);
}
.eux-block--daas-themed .eux-daas-themed__msg-bd {
	font-family: var(--eux-font-body);
	font-size: 13px;
	color: var(--eux-ink-800);
	line-height: 1.5;
	margin-top: 2px;
}
.eux-block--daas-themed .eux-daas-themed__msg-bd code,
.eux-block--daas-mockup .eux-daas-themed__msg-bd code {
	/* display: inline + vertical-align: baseline are defensive against
	   Salient's main-styles.css which applies `code { display: block }`
	   globally. Without these, the path-like values ("orders/sync.log",
	   "tests/myob-sku.spec.ts") break onto their own line as full-width
	   purple bars, splitting the surrounding sentence vertically.
	   white-space: nowrap keeps the path on one line — paths shouldn't
	   wrap mid-segment. !important on display is justified per
	   salient-coexistence.md defence 1 (fighting unscoped theme rules
	   on inherent inline elements). */
	display: inline !important;
	vertical-align: baseline;
	white-space: nowrap;
	font-family: var(--eux-font-mono);
	background: var(--eux-cream-100);
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 12px;
	color: var(--eux-woo-500);
}
.eux-block--daas-themed .eux-daas-themed__msg-rxn {
	margin-top: 6px;
	display: inline-flex;
	gap: 6px;
	font-family: var(--eux-font-body);
	font-size: 11px;
	color: var(--eux-ink-600, #4D4D4D);
}
.eux-block--daas-themed .eux-daas-themed__msg-rxn span {
	background: var(--eux-cream-100);
	border: 1px solid var(--eux-ink-100);
	border-radius: 99px;
	padding: 2px 8px;
}

/* Typing indicator */
.eux-block--daas-themed .eux-daas-themed__typing {
	font-family: var(--eux-font-body);
	font-size: 11px;
	color: var(--eux-ink-500, #6B6B6B);
	padding: 4px 18px 8px;
	font-style: italic;
}
.eux-block--daas-themed .eux-daas-themed__typing .d {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 99px;
	background: var(--eux-ink-400, #8C8C8C);
	margin: 0 1px;
	animation: euxDaasTypeDot 1.4s infinite;
}
.eux-block--daas-themed .eux-daas-themed__typing .d:nth-child(2) { animation-delay: 0.2s; }
.eux-block--daas-themed .eux-daas-themed__typing .d:nth-child(3) { animation-delay: 0.4s; }
@keyframes euxDaasTypeDot {
	0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
	30%           { opacity: 1;   transform: translateY(-2px); }
}

/* Compose box */
.eux-block--daas-themed .eux-daas-themed__compose {
	margin: 0;
	border-top: 1px solid var(--eux-ink-100);
	padding: 10px 14px;
	font-family: var(--eux-font-body);
	font-size: 12px;
	color: var(--eux-ink-400, #8C8C8C);
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--eux-cream-50);
}
.eux-block--daas-themed .eux-daas-themed__compose .send {
	margin-left: auto;
	color: var(--eux-woo-500);
	font-weight: 600;
}

/* ==========================================================================
   THEME: CREAM — cream-paper section, white panels (default)
   ========================================================================== */
.eux-block--daas-themed--cream {
	background: var(--eux-cream-50);
}

/* ==========================================================================
   THEME: LIGHT — pure white section, white panels
   ========================================================================== */
.eux-block--daas-themed--light {
	background: var(--eux-white);
}

/* ==========================================================================
   THEME: DARK — ink section, glass-effect panels
   ========================================================================== */
.eux-block--daas-themed--dark {
	background: var(--eux-ink-900);
	color: var(--eux-cream-100);
}

/* Left column — text colors for dark theme */
.eux-block--daas-themed--dark .eux-daas-themed__title    { color: var(--eux-cream-100); }
.eux-block--daas-themed--dark .eux-daas-themed__title em { color: var(--eux-woo-300); }
.eux-block--daas-themed--dark .eux-daas-themed__copy     { color: rgba(244, 240, 236, 0.7); }
.eux-block--daas-themed--dark .eux-daas-themed__eyebrow  { color: var(--eux-woo-200); }
.eux-block--daas-themed--dark .eux-daas-themed__eyebrow::before { background: var(--eux-woo-200); } /* v0.36.12 */
.eux-block--daas-themed--dark .eux-daas-themed__meta     { color: rgba(244, 240, 236, 0.45); }
/* v0.36.53 — dark-theme list text and bullet overrides. Light grey-cream
   text at 0.72 alpha matches the dark-theme card lists in problem-trio.
   Bullet stays woo-300 for accent contrast against dark backgrounds. */
.eux-block--daas-themed--dark .eux-daas-themed__left ul.wp-block-list li,
.eux-block--daas-themed--dark .eux-daas-themed__left ul li {
	color: rgba(244, 240, 236, 0.72);
}
.eux-block--daas-themed--dark .eux-daas-themed__left ul.wp-block-list li::before,
.eux-block--daas-themed--dark .eux-daas-themed__left ul li::before {
	background: var(--eux-woo-300);
}

/* Dark-theme button — cream-on-ink */
.eux-block--daas-themed--dark .wp-block-button .wp-block-button__link {
	background: var(--eux-cream-100);
	color: var(--eux-ink-900);
	border-color: var(--eux-cream-100);
}
.eux-block--daas-themed--dark .wp-block-button .wp-block-button__link:hover {
	background: var(--eux-woo-500);
	color: var(--eux-white);
	border-color: var(--eux-woo-500);
}

/* Right column — glass panels */
.eux-block--daas-themed--dark .eux-daas-themed__retainer,
.eux-block--daas-themed--dark .eux-daas-themed__slack {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: none;
}

/* Retainer card dark overrides */
.eux-block--daas-themed--dark .eux-daas-themed__retainer-bar {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.08);
}
.eux-block--daas-themed--dark .eux-daas-themed__retainer-bar > i {
	background: var(--eux-woo-300);
}
.eux-block--daas-themed--dark .eux-daas-themed__retainer-num     { color: var(--eux-cream-100); }
.eux-block--daas-themed--dark .eux-daas-themed__retainer-num .of { color: rgba(244, 240, 236, 0.4); }
.eux-block--daas-themed--dark .eux-daas-themed__retainer-num .u  { color: var(--eux-woo-300); }
.eux-block--daas-themed--dark .eux-daas-themed__retainer-meta > div {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}
.eux-block--daas-themed--dark .eux-daas-themed__retainer-meta .lbl { color: rgba(244, 240, 236, 0.5); }
.eux-block--daas-themed--dark .eux-daas-themed__retainer-meta .val { color: var(--eux-cream-100); }

/* Slack panel dark overrides */
.eux-block--daas-themed--dark .eux-daas-themed__slack-hd {
	background: rgba(255, 255, 255, 0.03);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}
.eux-block--daas-themed--dark .eux-daas-themed__slack-hd .hash { color: rgba(244, 240, 236, 0.5); }
.eux-block--daas-themed--dark .eux-daas-themed__slack-hd .name { color: var(--eux-cream-100); }
.eux-block--daas-themed--dark .eux-daas-themed__slack-hd .meta { color: rgba(244, 240, 236, 0.5); }

.eux-block--daas-themed--dark .eux-daas-themed__msg-av           { background: rgba(166, 89, 248, 0.18); color: var(--eux-woo-200); }
.eux-block--daas-themed--dark .eux-daas-themed__msg-av--client   { background: rgba(255, 255, 255, 0.08); color: var(--eux-cream-100); }
.eux-block--daas-themed--dark .eux-daas-themed__msg-hd .nm       { color: var(--eux-cream-100); }
.eux-block--daas-themed--dark .eux-daas-themed__msg-hd .nm .role { color: rgba(244, 240, 236, 0.5); }
.eux-block--daas-themed--dark .eux-daas-themed__msg-hd .ts       { color: rgba(244, 240, 236, 0.4); }
.eux-block--daas-themed--dark .eux-daas-themed__msg-bd           { color: rgba(244, 240, 236, 0.9); }
.eux-block--daas-themed--dark .eux-daas-themed__msg-bd code,
.eux-block--daas-themed--dark .eux-block--daas-mockup .eux-daas-themed__msg-bd code {
	background: rgba(166, 89, 248, 0.16);
	color: var(--eux-woo-200);
}
.eux-block--daas-themed--dark .eux-daas-themed__msg-rxn          { color: rgba(244, 240, 236, 0.7); }
.eux-block--daas-themed--dark .eux-daas-themed__msg-rxn span {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.08);
}
.eux-block--daas-themed--dark .eux-daas-themed__typing   { color: rgba(244, 240, 236, 0.5); }
.eux-block--daas-themed--dark .eux-daas-themed__typing .d { background: rgba(244, 240, 236, 0.4); }
.eux-block--daas-themed--dark .eux-daas-themed__compose {
	background: rgba(255, 255, 255, 0.03);
	border-top-color: rgba(255, 255, 255, 0.08);
	color: rgba(244, 240, 236, 0.4);
}
.eux-block--daas-themed--dark .eux-daas-themed__compose .send { color: var(--eux-woo-300); }

/* ==========================================================================
   REDUCED MOTION — disable all chat / pulse / typing animations
   ==========================================================================
   When the user prefers reduced motion, freeze all messages visible and
   stop all infinite loops. The Slack panel becomes a static screenshot. */
@media (prefers-reduced-motion: reduce) {
	.eux-block--daas-themed .eux-daas-themed__slack-scroll .eux-daas-themed__msg,
	.eux-block--daas-themed .eux-daas-themed__live-dot,
	.eux-block--daas-themed .eux-daas-themed__typing .d {
		animation: none !important;
		opacity: 1 !important;
		max-height: none !important;
		transform: none !important;
	}
	.eux-block--daas-themed .eux-daas-themed__slack-scroll .eux-daas-themed__msg {
		margin-top: 14px;
	}
	.eux-block--daas-themed .eux-daas-themed__slack-body {
		overflow-y: auto;
	}
}