/**
 * WI AI Agent admin — Perplexity-inspired layout (#A1221).
 * User prompts = bubbles. Agent = freestyle wide text. Composer docked bottom.
 * Light wp-admin palette (not a dark-theme clone).
 */

body.wp-admin #wi-qa-switcher-left,
body.wp-admin #wi-qa-switcher-right {
	display: none !important;
	visibility: hidden !important;
}

body.wi-agent-admin-page {
	/* FIX #menuscroll (Tobias 2026-09-29, screenshot "Settings" cut off, menu cannot scroll):
	   the viewport lock must NEVER sit on <body>. WP core lays the left menu out as a FLOATED
	   column (`#adminmenuwrap { position: relative; float: left }` in core's admin-menu.css;
	   `position: absolute` only inside the <=782px auto-fold, display:none <=600px) with a
	   `position: fixed` backdrop (`#adminmenuback { top: 0; bottom: -120px }`). An out-of-flow /
	   fixed menu column is scrolled by the DOCUMENT, so a height + `overflow-x: hidden` lock on
	   <body> froze it: everything below the fold ("Collapse menu", the lower entries) could not be
	   reached, and the page itself had nothing to scroll either. The height lock now lives on the
	   element that actually belongs to the agent (#wpbody-content below); <body> stays a normal,
	   scrollable document, so the menu scrolls exactly as in stock WP. */
	min-height: 100%;
}

body.wi-agent-admin-page #wpbody-content {
	/* The one height owner: it fills the space under the admin bar so the inner shell can
	   scroll itself. NO `overflow: hidden` here — that was the second half of the trap: it
	   clipped the absolutely positioned menu column instead of letting the document scroll. */
	padding-bottom: 0;
	height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px));
	min-height: 320px;
	box-sizing: border-box;
}

.wi-agent-wrap {
	max-width: 920px;
	margin-left: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 320px;
	height: 100%;
	max-height: 100%;
}

body.wi-agent-admin-page #wpfooter {
	display: none;
}

.wi-agent-wrap > h1.wi-agent-page-title,
.wi-agent-wrap > .wi-agent-meta {
	flex: 0 0 auto;
}

.wi-agent-wrap > h1.wi-agent-page-title {
	font-size: 13px;
	font-weight: 500;
	color: #646970;
	margin: 8px 0 4px;
}

.wi-agent-wrap .wi-agent-meta {
	margin: 0 0 12px;
}

.wi-agent-wrap .wi-agent-meta .notice {
	margin: 0 0 8px;
}

.wi-agent-shell {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 12px;
	overflow: hidden;
}

.wi-agent-shell--locked .wi-agent-stream {
	opacity: 0.42;
	pointer-events: none;
	user-select: none;
}

.wi-agent-shell--locked .wi-agent-dock {
	opacity: 1;
	pointer-events: auto;
	user-select: auto;
}

.wi-agent-shell--locked .wi-agent-consent-unlock,
.wi-agent-shell--locked .wi-agent-toolbar {
	opacity: 1;
	pointer-events: auto;
	user-select: auto;
}

.wi-agent-shell {
	position: relative;
}

.wi-agent-toolbar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	border-bottom: 1px solid #dcdcde;
	background: #fafafa;
}

.wi-agent-toolbar-start,
.wi-agent-toolbar-end {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.wi-agent-toolbar-start {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	flex-wrap: nowrap;
}

.wi-agent-toolbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 999px;
	background: #fff;
	color: #1d2327;
	font-size: 12px;
	line-height: 1.35;
	cursor: pointer;
	box-sizing: border-box;
}

.wi-agent-toolbar-btn:hover,
.wi-agent-toolbar-btn[aria-expanded="true"] {
	border-color: #2271b1;
	color: #2271b1;
}

.wi-agent-toolbar-btn--status {
	max-width: min(280px, 55vw);
}

.wi-agent-toolbar-btn__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wi-agent-toolbar-btn--shield .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.wi-agent-session-title {
	flex: 1 1 auto;
	min-width: 0;
	max-width: min(420px, 52vw);
	margin-left: 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #1d2327;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wi-agent-toolbar-btn--icon {
	min-width: 32px;
	justify-content: center;
	padding: 7px 10px;
}

.wi-agent-popover {
	position: absolute;
	/* M1 (Tobias 2026-10-02, Handy-Screenshot): der Verlauf/Toolbar-Popover lag HINTER dem
	   Chat-Dock. Gemessen auf Staging (390px, embed + standalone): Popover z-index 30,
	   .wi-agent-dock z-index 50 (mobil, @media <=1024px Z. 2979); der Popover-Boden (bei
	   maxTop geklemmt auf shell.height - popHeight - 8) überlappt den Composer, und
	   elementFromPoint im Überlappungspunkt traf die TEXTAREA des Docks, nicht den Popover.
	   Neue Ebene 60 sitzt über dem mobilen Dock (50) und unter der bereits vorhandenen
	   Fakten-Schublade (99999) bzw. dem Settings-Modal (100000) — kein 999999 nötig. */
	z-index: 60;
	min-width: 220px;
	max-width: min(420px, calc(100vw - 48px));
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.wi-agent-popover--wide {
	max-width: min(720px, calc(100vw - 32px));
}

.wi-agent-popover--above.wi-agent-popover--wide {
	max-height: min(420px, calc(100vh - 140px));
	overflow-y: auto;
}

.wi-agent-popover--above {
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

.wi-agent-popover--target {
	min-width: 320px;
	max-width: min(420px, calc(100vw - 32px));
	overflow: visible;
	/* M1: gleiche Anhebung wie .wi-agent-popover (60), damit die relative Ordnung erhalten
	   bleibt (target 70 > base 60, geöffnetes select2 80 > target 70). */
	z-index: 70;
}

.wi-agent-popover--target.select2-container--open,
.wi-agent-popover--target:has(.select2-container--open) {
	z-index: 80;
}

.wi-agent-popover--target select {
	width: 100%;
	max-width: 100%;
}

.wi-agent-popover--target .select2-container {
	width: 100% !important;
	max-width: 100%;
}

.wi-agent-popover--target .select2-container--open {
	display: block;
	width: 100% !important;
}

.wi-agent-popover--target .select2-container--open .select2-dropdown {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	display: block;
	margin-top: 4px;
}

#wi-agent-popover-target > .select2-container:not(.select2) {
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	display: block !important;
}

.wi-agent-target-select2-dropdown {
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	/* M1: muss über dem (jetzt 70/80 hohen) Target-Popover liegen. */
	z-index: 81;
}

.wi-agent-target-select2-dropdown .select2-results__options {
	max-height: min(280px, 40vh);
}

.wi-agent-target-select2-dropdown .select2-results__option[aria-disabled=true],
.wi-agent-target-select2-dropdown .wi-agent-target-hc-label {
	color: #9ca3af;
	font-style: italic;
}

option.wi-agent-target-hc {
	color: #9ca3af;
}

.wi-agent-popover-hint {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.45;
	color: #646970;
}

.wi-agent-popover-title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
}

.wi-agent-popover--history {
	min-width: 260px;
	max-width: min(320px, calc(100vw - 48px));
	max-height: min(360px, calc(100vh - 160px));
	overflow: hidden;
	padding-bottom: 10px;
}

.wi-agent-popover--history:not([hidden]) {
	display: flex;
	flex-direction: column;
}

.wi-agent-popover--history .wi-agent-popover-hint {
	margin-bottom: 8px;
}

.wi-agent-history-new {
	font-size: 12px;
	padding: 0;
	height: auto;
	line-height: 1.4;
}

.wi-agent-history-list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	max-height: min(260px, calc(100vh - 240px));
}

/* Tidy up the history (#A1275): a trash icon per row, one for the whole list. */
.wi-agent-history-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.wi-agent-history-clear,
.wi-agent-history-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #787c82;
	cursor: pointer;
}

.wi-agent-history-clear:hover,
.wi-agent-history-clear:focus-visible,
.wi-agent-history-delete:hover,
.wi-agent-history-delete:focus-visible {
	background: #fcf0f1;
	color: #b32d2e;
	outline: none;
}

.wi-agent-history-clear .dashicons,
.wi-agent-history-delete .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.wi-agent-history-list li {
	position: relative;
	margin: 0;
}

/* Always visible, not hover-only: the list re-renders whenever a session autosaves,
   which wiped the hover state right as the pointer arrived (Tobias 2026-07-26). */
.wi-agent-history-delete {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	color: #c3c4c7;
}

.wi-agent-history-list li:hover .wi-agent-history-delete {
	color: #787c82;
}

/* Someone else started this session, so the can stays greyed out (#A2141). */
.wi-agent-history-delete[disabled],
.wi-agent-history-list li:hover .wi-agent-history-delete[disabled] {
	color: #dcdcde;
	cursor: not-allowed;
}

.wi-agent-history-delete[disabled]:hover,
.wi-agent-history-delete[disabled]:focus-visible {
	background: transparent;
	color: #dcdcde;
}

.wi-agent-history-item {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px 34px 8px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	text-align: left;
	cursor: pointer;
	color: #1d2327;
}

.wi-agent-history-item:hover,
.wi-agent-history-item:focus-visible {
	background: #f0f0f1;
	outline: none;
}

.wi-agent-history-item.is-active {
	background: #e7f3ff;
}

.wi-agent-history-item__title {
	display: block;
	font-size: 13px;
	line-height: 1.35;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wi-agent-history-item__meta {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.3;
	color: #646970;
}

.wi-agent-history-empty {
	margin: 0;
	padding: 8px 10px;
	font-size: 12px;
	line-height: 1.45;
	color: #646970;
}

.wi-agent-toolbar-btn--history .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.wi-agent-help-steps {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.45;
}

.wi-agent-consent-unlock {
	position: sticky;
	top: 0;
	z-index: 4;
	background: #fff;
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 16px;
	background: #fff;
	border-bottom: 1px solid #dcdcde;
	border-left: 4px solid #2271b1;
}

.wi-agent-consent-unlock__title {
	margin: 0 0 8px;
	font-weight: 600;
	color: #1d2327;
	font-size: 14px;
}

.wi-agent-consent-unlock__label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	cursor: pointer;
	color: #1d2327;
	font-size: 13px;
	line-height: 1.45;
}

.wi-agent-consent-popover-label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	cursor: pointer;
	color: #1d2327;
	font-size: 13px;
	line-height: 1.45;
}

.wi-agent-empty-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	justify-content: center;
	margin-top: 4px;
}

.wi-agent-empty-chip {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	max-width: 260px;
	padding: 10px 16px;
	border: 1px solid #dcdcde;
	border-radius: 14px;
	background: #fff;
	color: #1d2327;
	font-size: 12px;
	line-height: 1.4;
	cursor: pointer;
	text-align: left;
	box-sizing: border-box;
}

.wi-agent-empty-chip:hover {
	border-color: #2271b1;
	background: #f0f6fc;
}

.wi-agent-empty-chip strong {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #646970;
	margin-bottom: 4px;
}

.wi-agent-empty-chip-summary {
	display: block;
	color: #3c434a;
	font-size: 12px;
	line-height: 1.45;
}

.wi-agent-shell--chat-active .wi-agent-empty-chips {
	display: none;
}

.wi-agent-stream {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 28px 16px 16px;
}

.wi-agent-empty {
	text-align: center;
	padding: 24px 20px 12px;
	max-width: 720px;
	margin: 0 auto;
}

/* M3 (Tobias 2026-10-02, Handy-Screenshot): im Fokus (und mobil) kam man nicht an den
   ganzen Inhalt. Ursache war NICHT ein fehlender Scroller — .wi-agent-stream scrollt
   (overflow-y: auto) in jeder Ansicht — sondern die Zentrierung: der Empty-State war
   höher als der Stream, und `justify-content: center` schiebt den Anfang oben aus dem
   Scrollbereich heraus, wo er nicht erreichbar ist. Gemessen (390px): Empty top 150 vs
   Stream top 203 → oberste 53px unerreichbar; 844x390 Landschaft/Fokus: Empty top -23.
   Jetzt zentrieren automatische Außenabstände: bei Platz wird zentriert, bei Überlauf
   fallen sie auf 0 und der Stream scrollt vom echten Anfang. EINE Mechanik — der Stream
   ist überall der Scroller, die Toolbar/das Dock bleiben stehen. */
.wi-agent-shell:not(.wi-agent-shell--chat-active) .wi-agent-stream {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 0;
}
.wi-agent-shell:not(.wi-agent-shell--chat-active) .wi-agent-empty {
	margin-top: auto;
	margin-bottom: auto;
}

.wi-agent-empty.is-hidden {
	display: none;
}

.wi-agent-empty-kicker {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #646970;
}

.wi-agent-empty-title {
	margin: 0 0 10px;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 600;
	color: #1d2327;
}

.wi-agent-empty-lead {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.5;
	color: #50575e;
}

.wi-agent-empty-tips {
	text-align: left;
	margin: 0 auto 16px;
	max-width: 720px;
	color: #646970;
	font-size: 13px;
}

.wi-agent-empty-tips summary {
	cursor: pointer;
	list-style: none;
}

.wi-agent-empty-tips summary::-webkit-details-marker {
	display: none;
}

.wi-agent-empty-tips ul {
	margin: 8px 0 0 1.1em;
}

.wi-agent-ideas-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 10px;
}

.wi-agent-ideas-col {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 10px 12px;
}

.wi-agent-ideas-col-title {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	color: #1d2327;
}

.wi-agent-ideas-list {
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 1.45;
	color: #50575e;
}

.wi-agent-ideas-item {
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-bottom: 1px solid #f0f0f1;
}

.wi-agent-ideas-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.wi-agent-ideas-item-text {
	display: block;
	margin: 0 0 4px;
}

.wi-agent-ideas-item-try {
	padding: 0;
	font-size: 12px;
	height: auto;
	line-height: 1.4;
}

.wi-agent-ideas-col .button-small {
	margin-top: 4px;
}

.wi-agent-workflow-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 8px;
	padding: 0 2px;
}

.wi-agent-workflow-step {
	font-size: 12px;
	color: #8c8f94;
	padding: 2px 8px;
	border-radius: 999px;
	background: #f0f0f1;
}

.wi-agent-workflow-step.is-active {
	color: #1d2327;
	background: #dce9f6;
	font-weight: 600;
}

.wi-agent-workflow-step.is-done {
	color: #2271b1;
	background: #edf5fa;
}

.wi-agent-composer-actions--flow {
	width: 100%;
	justify-content: flex-start;
}

.wi-agent-composer-actions--flow #wi-agent-preview {
	margin-left: auto;
}

@media (max-width: 782px) {
	.wi-agent-ideas-grid {
		grid-template-columns: 1fr;
	}

	.wi-agent-composer-actions--flow #wi-agent-preview {
		margin-left: 0;
	}
}

#wi-agent-thread {
	max-width: 720px;
	margin: 0 auto;
}

.wi-agent-msg {
	margin: 0 0 18px;
	max-width: 100%;
}

.wi-agent-msg--user {
	display: flex;
	justify-content: flex-end;
}

.wi-agent-user-row {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	max-width: min(560px, 88%);
}

.wi-agent-bubble-edit {
	flex-shrink: 0;
	padding: 6px 2px 0 !important;
	min-height: 0;
	color: #646970;
	line-height: 1;
}

.wi-agent-bubble-edit:hover,
.wi-agent-bubble-edit:focus {
	color: #2271b1;
}

.wi-agent-bubble-edit .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.wi-agent-msg--user .wi-agent-bubble {
	display: inline-block;
	flex: 1 1 auto;
	min-width: 0;
	background: #f0f0f1;
	color: #1d2327;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
}

.wi-agent-msg--agent {
	color: #1d2327;
	font-size: 15px;
	line-height: 1.55;
	padding: 2px 0 4px;
}

.wi-agent-msg--agent .wi-agent-msg-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #8c8f94;
	margin: 0 0 6px;
}

.wi-agent-msg--agent a {
	color: #2271b1;
}

#wi-agent-plan,
#wi-agent-clarify,
#wi-agent-result {
	max-width: 720px;
	margin: 12px auto 0;
}

.wi-agent-draft-cart {
	margin: 0 0 12px;
}

.wi-agent-draft-cart__inner {
	margin: 0 16px 12px;
	padding: 14px 16px;
	background: #f0f6fc;
	border: 1px solid #c3d4e0;
	border-radius: 10px;
}

.wi-agent-draft-cart__kicker {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #50575e;
}

.wi-agent-draft-cart__title {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.3;
	color: #1d2327;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
}

.wi-agent-draft-cart__hint {
	margin: 0 0 10px;
}

.wi-agent-draft-cart__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wi-agent-draft-cart__item {
	margin: 0 0 6px;
}

.wi-agent-draft-cart__label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.4;
}

.wi-agent-draft-cart__check {
	margin-top: 3px;
	flex-shrink: 0;
}

.wi-agent-draft-cart__text {
	flex: 1 1 auto;
	min-width: 0;
}

.wi-agent-clarify {
	display: none;
}

.wi-agent-clarify.is-visible {
	display: block;
}

.wi-agent-clarify-card {
	background: #f6f7f7;
	border: 1px solid #c3c4c7;
	border-radius: 10px;
	padding: 16px 18px;
}

.wi-agent-clarify-kicker {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #646970;
}

.wi-agent-clarify-prompt {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.45;
	color: #1d2327;
}

.wi-agent-clarify-hint {
	margin: -6px 0 12px;
	color: #646970;
	font-size: 13px;
	line-height: 1.4;
}

.wi-agent-typo-hints {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.wi-agent-typo-chip {
	font-size: 12px !important;
	line-height: 1.3 !important;
	padding: 4px 10px !important;
	height: auto !important;
}

.wi-agent-clarify-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wi-agent-clarify-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	cursor: pointer;
}

.wi-agent-clarify-option:hover {
	border-color: #2271b1;
}

.wi-agent-clarify-option input {
	margin: 3px 0 0;
}

.wi-agent-clarify-option-label {
	flex: 1;
	font-size: 14px;
	line-height: 1.4;
	color: #1d2327;
}

.wi-agent-clarify-rec-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	color: #135e96;
	background: #e7f3ff;
	border-radius: 3px;
	vertical-align: middle;
}

.wi-agent-clarify-option:has(input:checked) {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	background: #f0f6fc;
}

.wi-agent-clarify-other {
	width: 100%;
	margin-top: 4px;
	display: none;
}

.wi-agent-clarify-option--other:has(input:checked) + .wi-agent-clarify-other {
	display: block;
}

.wi-agent-clarify-actions {
	margin: 14px 0 0;
}

.wi-agent-clarify-done {
	margin: 0;
	padding: 10px 12px;
	background: #edfaef;
	border: 1px solid #68de7c;
	border-radius: 8px;
	color: #1d2327;
	font-size: 14px;
}

#wi-agent-status {
	max-width: 720px;
	margin: 8px auto 0;
	min-height: 1.2em;
	color: #50575e;
	font-size: 13px;
}

/* E-030/E-039 rebuild (2026-08-27, Tobias: "Spracherkennung auf ein Icon reduzieren" /
   "alles in einem Icon" / "in einer Linie"): the whole dictation surface is ONE compact
   control — a round mic icon (#wi-agent-mic-go) that starts recording immediately plus a tiny
   caret (#wi-agent-mic-caret) that opens a small dropdown with the two methods, each with its
   own language submenu. Everything stays on the composer's single line. */
.wi-agent-mic {
	position: relative;
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
	min-width: 0;
}
.wi-agent-mic[hidden] {
	display: none;
}
.wi-agent-mic__go {
	min-height: 32px;
	min-width: 36px;
	justify-content: center;
	padding: 8px 10px;
}
.wi-agent-mic__go .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}
/* The tiny caret sits directly on the mic pill's right edge and opens the dropdown. */
.wi-agent-mic__caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	margin-left: -6px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: #646970;
	cursor: pointer;
	line-height: 1;
}
.wi-agent-mic__caret .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}
.wi-agent-mic__caret:hover,
.wi-agent-mic__caret[aria-expanded="true"] {
	border-color: #dcdcde;
	background: #f6f7f7;
	color: #1d2327;
}
/* The dropdown panel — opens UPWARD (Tobias 2026-08-27: "vorne muss das Untermenü nach oben
   aufgehen … und nach unten sieht man es nicht"): the composer sits at the very bottom, so a
   dropdown opening downward is cut off at the viewport edge. It is absolute above the control,
   never modal, and closes on outside click. */
.wi-agent-mic-menu {
	position: absolute;
	bottom: calc( 100% + 6px );
	right: 0;
	z-index: 30;
	min-width: 260px;
	max-width: min( 340px, 84vw );
	max-height: 70vh;
	overflow: auto;
	padding: 6px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.12 );
}
.wi-agent-mic-menu[hidden] {
	display: none;
}
.wi-agent-mic-menu__head {
	margin: 0 0 4px;
	padding: 2px 8px 4px;
	font-size: 11px;
	line-height: 1.3;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #646970;
}
.wi-agent-mic-menu__method {
	display: block;
}
.wi-agent-mic-menu__method.is-unavailable .wi-agent-mic-menu__label {
	opacity: 0.5;
}
.wi-agent-mic-menu__method-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 7px 8px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #1d2327;
	font-size: 13px;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}
.wi-agent-mic-menu__method-btn:hover,
.wi-agent-mic-menu__method-btn[aria-expanded="true"] {
	background: #f0f6fc;
}
.wi-agent-mic-menu__method-btn:disabled {
	cursor: default;
}
.wi-agent-mic-menu__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	color: #2271b1;
	font-size: 14px;
	line-height: 1;
}
.wi-agent-mic-menu__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wi-agent-mic-menu__caret {
	flex: 0 0 auto;
	color: #646970;
	font-size: 11px;
}
/* Language submenu under a method row — indented, its own quiet background. */
.wi-agent-mic-menu__langs {
	margin: 2px 0 4px 22px;
	padding: 2px;
	border-left: 1px solid #dcdcde;
	border-radius: 0 6px 6px 0;
	background: #f6f7f7;
}
.wi-agent-mic-menu__langs[hidden] {
	display: none;
}
.wi-agent-mic-menu__lang {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 5px 8px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #1d2327;
	font-size: 12px;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wi-agent-mic-menu__lang:hover {
	background: #eef0f1;
}

/* Real progress while writing it down (#Axxx) — replaces the old " (3/7)" text suffix on
   #wi-agent-status with a bar the host can actually see move. Single-part transcriptions never
   show this (they would sit at "1/1" forever); see transcribeWhisperSegments(). */
#wi-agent-mic-progress {
	max-width: 720px;
	margin: 6px auto 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

#wi-agent-mic-progress[hidden] {
	display: none;
}

.wi-agent-mic-progress-label {
	flex-shrink: 0;
	font-size: 12px;
	color: #50575e;
}

.wi-agent-mic-progress-track {
	flex: 1 1 auto;
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #dcdcde;
	overflow: hidden;
}

.wi-agent-mic-progress-bar {
	display: block;
	height: 100%;
	width: 0%;
	background: #2271b1;
	border-radius: 999px;
	transition: width 0.25s ease;
}

.wi-agent-dock {
	flex: 0 0 auto;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	border-top: 1px solid #dcdcde;
	background: #fafafa;
	padding: 12px 16px 14px;
	box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
}

/* #A-live D/E: persistent action bar pinned above the composer — review the new webinar page by page. */
.wi-agent-actionbar {
	margin: 0 0 10px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #c3d4e0;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	/* M4: Anker für das schwebende Icon + Clip für das nach links wegfahrende Panel. */
	position: relative;
	overflow: hidden;
}

.wi-agent-actionbar[hidden] {
	display: none;
}

.wi-agent-actionbar__lead {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	color: #50575e;
}

/* M2 (Tobias 2026-10-02, Handy-Screenshot): die CTA-Knöpfe der Aktionsleiste
   ("Registrierungsseite", "Danke-Seite", "Webinarraum öffnen" …) standen auf schmalen
   Displays untereinander (flex-wrap: wrap) und liefen ineinander. Gemessen vorher
   (390px): 3 Knöpfe auf 3 Zeilen (y 491/543/595), overflow-x: visible, scroll-snap: none.
   Sie sind jetzt EINE horizontal scrollbare Reihe — dieselbe Mechanik wie die Admin-CTAs,
   ein Wisch statt Umbruch. Inhalte behalten ihre natürliche Breite (flex: 0 0 auto, kein
   Umbruch im Knopf), die Leiste selbst scrollt mit dezenter Scrollbar. */
.wi-agent-actionbar__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
	padding-bottom: 2px;
}

.wi-agent-actionbar__row > * {
	flex: 0 0 auto;
	min-width: 0;
	scroll-snap-align: start;
}

.wi-agent-actionbar__row .button {
	white-space: nowrap;
}

/* Der "Settings"-Link sitzt in der Reihe; sein margin-left: auto (Basis-Regel Z. 1318)
   würde ihn bei freiem Platz an den Rand drücken und die Reihe auseinanderreißen. */
.wi-agent-actionbar__row .wi-agent-actionstep--settings {
	margin-left: 0;
}

/* Dezent sichtbare Scrollbar (WebKit/Blink) — sichtbar, aber leise. */
.wi-agent-actionbar__row::-webkit-scrollbar {
	height: 6px;
}
.wi-agent-actionbar__row::-webkit-scrollbar-track {
	background: transparent;
}
.wi-agent-actionbar__row::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.22);
	border-radius: 3px;
}

/* M4 (Tobias 2026-10-02, Handy-Screenshot): "Die großen CTA-Buttons sollen weg — sie sollen
   sich einklappen lassen, und statt ihrer bleibt links ein schwebendes Icon."
   Links an der Reihe sitzt ein kleiner Griff (Winkel). Ein Tipp darauf zieht Satz + Reihe
   sanft nach links weg; an ihrer Stelle bleibt links ein rundes, schwebendes Icon (Weltkugel),
   das die Reihe per Tipp zurückholt. Der Zustand wird pro Chat/Kampagne in localStorage
   gemerkt (wi-agent-cta-row-collapsed_…, siehe wiActionbarApplyCollapsed in
   assets/wi-agent-admin.js), damit die Reihe nach einem Neuladen so bleibt.
   Kein Knopf wird entfernt — die Reihe wird nur ein- und ausgeklappt. */

/* Griff + Reihe nebeneinander; die Reihe bleibt der horizontale Scroller und schrumpft mit. */
.wi-agent-actionbar__strip {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wi-agent-actionbar__strip .wi-agent-actionbar__row {
	flex: 1 1 auto;
	min-width: 0;
}

/* Der Griff: klein und leise, immer am linken Rand der Reihe — er scrollt nicht mit. */
.wi-agent-actionbar__grip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #c3d4e0;
	border-radius: 8px;
	background: #fff;
	color: #2271b1;
	cursor: pointer;
	line-height: 1;
}

.wi-agent-actionbar__grip:hover,
.wi-agent-actionbar__grip:focus-visible {
	background: #f0f6fc;
	border-color: #2271b1;
	color: #135e96;
}

.wi-agent-actionbar__grip svg {
	width: 16px;
	height: 16px;
}

/* Das Panel (Satz + Griff + Reihe) fährt nach links weg und blendet dabei aus. */
.wi-agent-actionbar__panel {
	max-height: 480px;
	transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
		max-height 0.3s ease, visibility 0s linear 0s;
}

.wi-agent-actionbar.is-cta-collapsed .wi-agent-actionbar__panel {
	opacity: 0;
	transform: translateX(-18px);
	max-height: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.3s ease, max-height 0.3s ease,
		visibility 0s linear 0.3s;
}

/* Das schwebende Icon: rund, 46×46 Tipp-Fläche, links über dem Composer. Nur eingeklappt
   sichtbar und tippbar (visibility: hidden nimmt es auch aus der Tab-Reihenfolge). */
.wi-agent-actionbar__bubble {
	position: absolute;
	left: 4px;
	bottom: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid #c3d4e0;
	border-radius: 50%;
	background: #fff;
	color: #2271b1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(0.55) translateX(-10px);
	transition: opacity 0.2s ease, transform 0.28s ease, visibility 0s linear 0.3s;
}

.wi-agent-actionbar__bubble:hover,
.wi-agent-actionbar__bubble:focus-visible {
	background: #f0f6fc;
	border-color: #2271b1;
	color: #135e96;
}

.wi-agent-actionbar__bubble svg {
	width: 24px;
	height: 24px;
}

.wi-agent-actionbar.is-cta-collapsed .wi-agent-actionbar__bubble {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: scale(1) translateX(0);
	transition: opacity 0.24s ease 0.18s,
		transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s,
		visibility 0s linear 0s;
}

/* Eingeklappt: die leere Karte verschwindet, ein schmaler Streifen bleibt stehen — das Icon
   schwebt links darin, der Composer darunter bleibt frei. */
.wi-agent-actionbar.is-cta-collapsed {
	padding: 4px;
	min-height: 54px;
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

/* Ein offenes "Weitere Impulse"-Häkchen gehört zur Reihe — eingeklappt verschwindet es mit. */
.wi-agent-actionbar.is-cta-collapsed > .wi-agent-ask {
	display: none;
}

/* Wer Bewegung ablehnt, bekommt denselben Wechsel ohne Animation. */
@media ( prefers-reduced-motion: reduce ) {
	.wi-agent-actionbar__panel,
	.wi-agent-actionbar__bubble,
	.wi-agent-actionbar.is-cta-collapsed .wi-agent-actionbar__panel,
	.wi-agent-actionbar.is-cta-collapsed .wi-agent-actionbar__bubble {
		transition: none;
	}
}

.wi-agent-actionstep.is-visited:not(.button-primary) {
	opacity: 0.7;
	position: relative;
}

.wi-agent-actionstep.is-visited:not(.button-primary)::after {
	content: "\2713";
	margin-left: 6px;
	color: #2271b1;
	font-weight: 700;
}

/* P126/Regel 2: mark the page that really changed, so "is it applied?" is answered
   by the bar itself. Distinct from .is-visited (that means "you looked at it"). */
.wi-agent-actionstep.is-changed {
	box-shadow: inset 0 0 0 2px #2271b1;
	position: relative;
}

.wi-agent-actionstep.is-changed::before {
	content: "\25CF";
	margin-right: 6px;
	color: #2271b1;
	font-size: 10px;
	vertical-align: middle;
}

/* On the active (blue) step the same blue dot would nearly vanish. */
.wi-agent-actionstep.is-changed.button-primary::before {
	color: #fff;
}

/* P126/Punkt 7: a proposal is on the table but nothing was applied yet — the pages behind these
   buttons still show the previous state, so the bar must not look like it already leads there.
   Dimmed, not disabled: the host may still open the old page on purpose. */
.wi-agent-actionbar.is-proposal-pending .wi-agent-actionstep--page {
	opacity: 0.45;
	filter: grayscale(1);
}

.wi-agent-actionbar.is-proposal-pending .wi-agent-actionstep--page:hover,
.wi-agent-actionbar.is-proposal-pending .wi-agent-actionstep--page:focus {
	opacity: 0.75;
	filter: grayscale(0.4);
}

.wi-agent-actionstep--pulse.button-primary {
	background: #135e96;
	border-color: #135e96;
	box-shadow: 0 0 0 2px rgba(19, 94, 150, 0.25);
}

.wi-agent-actionstep--settings {
	margin-left: auto;
	font-size: 12px;
	color: #646970;
	text-decoration: underline;
	align-self: center;
}

.wi-agent-composer {
	position: relative;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 16px;
	padding: 10px 12px 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.wi-agent-composer:focus-within {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

.wi-agent-composer #wi-agent-intent {
	width: 100%;
	border: 0;
	box-shadow: none;
	/* P1.5: JS auto-grows the field with its content; no manual resize handle. */
	resize: none;
	overflow-y: hidden;
	min-height: 52px;
	background: transparent;
	color: #1d2327;
	font-size: 14px;
	line-height: 1.45;
	padding: 4px 2px 8px;
}

.wi-agent-composer #wi-agent-intent:focus {
	outline: none;
	box-shadow: none;
}

/* Pending image thumbnails (THEMA-agent-bilder): rendered by wiRenderPendingImages() in
   wi-agent-admin.js. Visible confirmation that an image rides along with the next send. */
.wi-agent-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 2px 8px;
}
.wi-agent-attachments[hidden] {
	display: none;
}
.wi-agent-attachment__privacy {
	flex-basis: 100%;
	font-size: 12px;
	line-height: 1.35;
	color: #996800;
	background: #fcf9e8;
	border: 1px solid #e2d28a;
	border-radius: 8px;
	padding: 6px 9px;
}
.wi-agent-attachment {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 200px;
	background: #f0f6fc;
	border: 1px solid #c5d9ed;
	border-radius: 10px;
	padding: 5px 8px 5px 5px;
	font-size: 12px;
	line-height: 1.2;
	color: #1d2327;
}
.wi-agent-attachment__thumb {
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 6px;
	background: #fff;
	border: 1px solid #c3c4c7;
	flex: 0 0 auto;
}
.wi-agent-attachment__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 auto;
	min-width: 0;
}
.wi-agent-attachment__remove {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	line-height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #dcdcde;
	color: #1d2327;
	font-size: 15px;
	cursor: pointer;
	text-align: center;
}
.wi-agent-attachment__remove:hover {
	background: #d63638;
	color: #fff;
}

.wi-agent-composer-bar {
	display: flex;
	/* E-030 rebuild (Tobias 2026-08-27: "alles in einem in einer Zeile"): everything —
	   ideas, target, paperclip, step back, mic, send — flows on ONE line. Only the very
	   narrow breakpoint below lets the actions wrap. */
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	justify-content: space-between;
}

.wi-agent-composer-pills {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

.wi-agent-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 14px;
	border: 1px solid #dcdcde;
	border-radius: 999px;
	background: #f6f7f7;
	color: #1d2327;
	font-size: 12px;
	line-height: 1.35;
	cursor: pointer;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 32px;
}
/* The target pill is hidden after the first input (wiLockTargetPill, Tobias 2026-08-27) —
   without this the author rule above (`display: inline-flex`) beats the UA `[hidden]` rule,
   so the pill stayed standing mid-conversation and looked like a still-working "Ziel"-switch
   when the choice had actually been locked. Same gotcha as the `.button[hidden]` override. */
.wi-agent-pill[hidden] {
	display: none;
}

.wi-agent-pill:hover,
.wi-agent-pill[aria-expanded="true"] {
	border-color: #2271b1;
	background: #f0f6fc;
	color: #1d2327;
}

.wi-agent-pill--target {
	max-width: min(240px, 45vw);
}

/* C3: once a target is picked, the pill states a fact — the same blue "pick me" hover ring
   used before any choice was made would read as if the choice were still missing. */
.wi-agent-target-pill--chosen:hover,
.wi-agent-target-pill--chosen[aria-expanded="true"] {
	border-color: #dcdcde;
	background: #f6f7f7;
	color: #1d2327;
}

.wi-agent-pill__prefix {
	color: #646970;
	flex-shrink: 0;
}

#wi-agent-target-pill-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wi-agent-target-pill-wrap {
	position: relative;
}

.wi-agent-pill--mic .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.wi-agent-composer-actions {
	display: flex;
	/* One line on desktop; only the very narrow breakpoint lets this wrap. */
	flex-wrap: nowrap;
	gap: 6px;
	align-items: center;
	flex-shrink: 1;
	min-width: 0;
}

.wi-agent-composer-actions .button {
	border-radius: 999px;
}

/* A disabled button explains nothing and only costs space in the bar — it disappears
   the moment it can't be used and reappears the moment it can (Tobias 2026-07-28).
   #wi-agent-send is deliberately not `.button` here — it stays visible even disabled,
   it is the one fixed anchor of the composer bar. `[hidden]` needs the same override:
   WP admin's own `.button { display: … }` rule otherwise beats the browser's default
   `[hidden] { display: none }`, which is why "Step back" / "Create" kept showing up
   greyed out even though the script had already marked them hidden. */
.wi-agent-composer-actions .button:disabled,
.wi-agent-composer-actions .button[hidden] {
	display: none;
}

#wi-agent-send {
	flex-shrink: 0;
}

/* #E-006 (2026-07-29): the arrow is no longer "always visible even disabled" — it now
   only shows once the field holds something to send (Tobias). #wi-agent-send is not
   `.button`, so it needs its own [hidden] override, same reasoning as above. */
#wi-agent-send[hidden] {
	display: none;
}

/* Minimum 44x44 tap target on narrow windows — the send arrow above all, it is the
   only way to submit on a phone where nobody thinks of pressing Enter.
   Widened from 600px to WordPress admin's own 782px narrow breakpoint (Tobias
   2026-07-28): between the two the arrow was back down to 36x26, which is a miss
   on a touch screen even though it was technically on screen. */
@media (max-width: 782px) {
	.wi-agent-composer-actions .wi-agent-pill,
	.wi-agent-mic__go,
	#wi-agent-send {
		min-height: 44px;
	}
	.wi-agent-pill--upload,
	.wi-agent-mic__go,
	#wi-agent-send {
		min-width: 44px;
	}
	.wi-agent-mic__caret {
		width: 30px;
		height: 30px;
	}
}

.wi-agent-plan-collapsible {
	margin: 10px 0;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 8px 10px;
	background: #f6f7f7;
}

.wi-agent-plan-collapsible summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	color: #1d2327;
}

/* E-030 rebuild: the single mic icon (#wi-agent-mic-go) inherits the .wi-agent-pill base and
   is sized by .wi-agent-mic__go above; its wrap (#wi-agent-mic-wrap) carries the [hidden]
   override via .wi-agent-mic[hidden]. The old live/record/compare buttons are gone. */
.wi-agent-stt-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 10px 0 0;
	padding: 10px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	background: #f6f7f7;
}

.wi-agent-stt-compare[hidden] {
	display: none !important;
}

.wi-agent-stt-compare-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 12px;
}

.wi-agent-stt-compare-head strong {
	font-size: 12px;
}

.wi-agent-stt-compare-out {
	min-height: 4.5em;
	max-height: 9em;
	overflow: auto;
	padding: 8px 10px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}

.wi-agent-stt-compare-out.is-live {
	border-color: #2271b1;
}

.wi-agent-stt-compare-out.is-pending {
	color: #646970;
	font-style: italic;
}

@media (max-width: 782px) {
	.wi-agent-stt-compare {
		grid-template-columns: 1fr;
	}
}

.wi-agent-composer-actions #wi-agent-confirm:disabled {
	opacity: 0.55;
}

.wi-agent-composer-actions #wi-agent-confirm.button-primary:not(:disabled) {
	box-shadow: 0 0 0 1px #2271b1;
}

.wi-agent-clarify-done-card {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #c3e6cb;
	border-radius: 8px;
	background: #f0fff4;
}

.wi-agent-clarify-recap {
	margin: 8px 0 12px;
	padding-left: 18px;
	color: #1d2327;
	font-size: 13px;
}

.wi-agent-clarify-apply-hint {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
}

.wi-agent-clarify-apply-steps {
	margin: 0 0 4px;
	padding-left: 18px;
	font-size: 13px;
	color: #50575e;
}

.wi-agent-clarify-multi-hint {
	margin: 6px 0 0;
}

/* P129 — grouped ask (radio/checkbox groups + gated Continue) inside the fluid chat thread (res.ask)
   and inside the actionbar "More impulses" checklist (F4). Same visual language as .wi-agent-clarify-*
   above so the host recognises the pattern in both places. */
.wi-agent-ask {
	max-width: 720px;
	margin: 4px auto 12px;
	padding: 14px 16px;
	background: #f6f7f7;
	border: 1px solid #c3c4c7;
	border-radius: 10px;
}

.wi-agent-ask-group {
	margin: 0 0 14px;
}

.wi-agent-ask-group:last-of-type {
	margin-bottom: 0;
}

.wi-agent-ask-group-label {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #1d2327;
}

.wi-agent-ask-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wi-agent-ask-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	cursor: pointer;
}

.wi-agent-ask-option:hover {
	border-color: #2271b1;
}

.wi-agent-ask-option input {
	margin: 3px 0 0;
}

.wi-agent-ask-option-label {
	flex: 1;
	font-size: 14px;
	line-height: 1.4;
	color: #1d2327;
}

.wi-agent-ask-option:has(input:checked) {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	background: #f0f6fc;
}

/* Multi (checkbox) group gets its own confirm button under the options (Regel 2) — a single click can't
   auto-advance like a radio pick. Once confirmed the group locks: dimmed, no-pointer, selection stays
   visible instead of disappearing (Regel 3). */
.wi-agent-ask-group-footer {
	margin: 8px 0 0;
}

.wi-agent-ask-group-confirm {
	font-size: 12px;
}

.wi-agent-ask-group[data-ask-state="confirmed"] .wi-agent-ask-options {
	opacity: 0.72;
}

.wi-agent-ask-group[data-ask-state="confirmed"] .wi-agent-ask-option {
	cursor: default;
}

/* Free-text option — "I'll type it below" (Regel 3). JS toggles display/disabled; this keeps the
   collapsed default sane even before JS binds. */
.wi-agent-ask-option-input {
	width: 100%;
	margin: -2px 0 0;
	display: none;
}

.wi-agent-ask-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
}

.wi-agent-ask-open-hint {
	font-size: 12px;
	color: #646970;
}

.wi-agent-dock-hint {
	margin: 8px 0 0;
	font-size: 12px;
	color: #646970;
}

.wi-agent-persist-hint .wi-agent-reset-link {
	margin-left: 4px;
	vertical-align: baseline;
}

@media (max-width: 782px) {
	.wi-agent-wrap > h1.wi-agent-page-title {
		margin: 4px 0 2px;
		font-size: 12px;
	}

	.wi-agent-stream {
		padding: 20px 14px 12px;
	}

	.wi-agent-empty-title {
		font-size: 22px;
	}
}

.wi-agent-tier-compare {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	background: #fff;
}

.wi-agent-tier-compare__title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
}

.wi-agent-tier-compare__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: stretch;
}

.wi-agent-tier-compare__col {
	margin: 0;
	padding: 12px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #f6f7f7;
}

.wi-agent-tier-compare__col--plus {
	border-color: #2271b1;
	background: #f0f6fc;
}

.wi-agent-tier-compare__label {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
}

.wi-agent-tier-compare__field {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.45;
	color: #1d2327;
}

.wi-agent-tier-compare__field:last-child {
	margin-bottom: 0;
}

.wi-agent-tier-compare__footnote {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #646970;
}

.wi-agent-tier-compare__actions {
	margin: 12px 0 0;
}

@media (max-width: 782px) {
	.wi-agent-tier-compare__grid {
		grid-template-columns: 1fr;
	}
}

/* #A1294 Fluid chat: two-column layout with a persistent right-side facts panel. */
.wi-agent-wrap {
	max-width: 1240px;
	/* FIX #leftedge (Tobias 2026-09-29, screenshot on a host install: the chat text began at the
	   very left, behind the WordPress menu). In NORMAL flow core already gives the content its
	   own gutter (`#wpcontent { padding-left: 20px; margin-left: 160px }`), so the exact cause on
	   that install was NOT a missing offset: with the menu folded/auto-folded (core switches
	   `#adminmenuwrap` to `position: absolute; width: 190px` at <=782px, which does overlay the
	   content) or while its fly-out is open, the menu column can paint over the first content pixels, and the
	   agent page started hard against that edge with no clearance of its own. This gutter is that
	   clearance: it is deliberately modest (20px, inside the max-width box, so the right facts
	   panel keeps its 340px) — it is a safety margin, not a claim to out-paint the menu. The
	   admin menu stays above the content (see css/wi-wp-chrome-ceiling.css). */
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* Core's own narrow-content rule (`#wpcontent { padding-left: 10px; margin-left: 0 }`) applies
   from 782px down, so the layout already carries a gutter there and this one must not stack on
   top of it. Only the desktop layout gets the extra 20px. */
@media (max-width: 782px) {
	.wi-agent-wrap {
		padding-left: 0;
		padding-right: 0;
	}
}
.wi-agent-layout {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 16px;
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
}
.wi-agent-layout > .wi-agent-shell {
	flex: 1 1 auto;
	min-width: 0;
}
.wi-agent-facts-panel {
	flex: 0 0 340px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: 100%;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 12px;
	overflow: hidden;
	box-sizing: border-box;
}
.wi-agent-facts-panel__head {
	flex: 0 0 auto;
	padding: 12px 16px;
	border-bottom: 1px solid #ececed;
	background: #fafafa;
}
.wi-agent-facts-panel__title {
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
}
/* ACCORDION (Tobias 2026-08-27, "Das muss zugeklappt sein … wechseln"): the panel body is two
   <details> sections — to-do list on top (collapsed, count badge, hidden when empty) and facts
   below (expanded by default). The accordion container owns the scrolling; each section's body
   scrolls within it. The facts body inside no longer needs its own flex sizing. */
.wi-agent-facts-accordion {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.wi-agent-facts-acc {
	flex: 0 0 auto;
	border-bottom: 1px solid #ececed;
}
.wi-agent-facts-acc__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.wi-agent-facts-acc__head::-webkit-details-marker {
	display: none;
}
.wi-agent-facts-acc__head:hover {
	background: #f6f7f7;
}
.wi-agent-facts-acc__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #646970;
}
.wi-agent-facts-acc__count {
	flex: 0 0 auto;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #2271b1;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}
.wi-agent-facts-acc__count[hidden] {
	display: none;
}
.wi-agent-facts-acc__caret {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid #8c8f94;
	border-bottom: 2px solid #8c8f94;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}
.wi-agent-facts-acc[open] .wi-agent-facts-acc__caret {
	transform: rotate(225deg);
}
.wi-agent-facts-acc__body {
	padding: 0 0 6px;
}
.wi-agent-facts-acc--tasks .wi-agent-facts-acc__body {
	border-top: 1px solid #f0f0f1;
	background: #fff;
}
.wi-agent-facts-panel__body {
	min-height: 0;
	padding: 4px 16px 12px;
}
.wi-agent-facts-empty {
	color: #8c8f94;
	font-size: 12px;
	line-height: 1.5;
	margin: 12px 0;
}
.wi-agent-fact-row {
	padding: 9px 0;
	border-bottom: 1px solid #f0f0f1;
}
.wi-agent-fact-row:last-child {
	border-bottom: 0;
}
.wi-agent-fact-key {
	color: #646970;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 2px;
}
.wi-agent-fact-val {
	font-weight: 600;
	color: #1d2327;
	font-size: 13px;
	line-height: 1.4;
	word-break: break-word;
	white-space: pre-wrap;
}
/* Short scalar fields sit 2-up to keep the panel compact; long narrative fields stay full width. */
.wi-agent-facts-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
}
.wi-agent-facts-grid .wi-agent-fact-cell {
	padding: 7px 0;
	border-bottom: 1px solid #f0f0f1;
}
.wi-agent-facts-grid .wi-agent-fact-cell:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
.wi-agent-fact-row--full {
	white-space: normal;
}
.wi-agent-fact-row--flash {
	animation: wiAgentFactFlash 1.4s ease;
}
/* AO follow-up (2026-07-31): a testimonial's proof IS its source — small and clickable, like a
   footnote, never a text block competing with the quote itself for attention. */
.wi-agent-fact-val--testimonials {
	font-weight: 400;
}
.wi-agent-fact-quote {
	margin: 0 0 2px;
	padding: 0 0 0 8px;
	border-left: 2px solid #dcdcde;
	font-weight: 600;
	font-style: normal;
}
.wi-agent-fact-quote + .wi-agent-fact-source {
	display: block;
	margin: 0 0 8px 8px;
}
/* "kind":"name" — a client/employer/teaching-post finding, not a spoken sentence: no
   quotation marks, no left border (that reads as "someone said this"), still gets its
   clickable source right below like every other reference. */
.wi-agent-fact-reference-name {
	margin: 0 0 2px;
	padding: 0 0 0 8px;
	font-weight: 600;
}
.wi-agent-fact-reference-name + .wi-agent-fact-source {
	display: block;
	margin: 0 0 8px 8px;
}
.wi-agent-fact-source {
	font-size: 10px;
	font-weight: 400;
	color: #787c82;
	text-decoration: none;
}
.wi-agent-fact-source:hover,
.wi-agent-fact-source:focus {
	color: #2271b1;
	text-decoration: underline;
}
@keyframes wiAgentFactFlash {
	0% { background: #fff5d6; }
	100% { background: transparent; }
}
.wi-agent-facts-panel__instinct {
	flex: 0 0 auto;
	border-top: 1px solid #ececed;
	background: #fafafa;
}
/* P6 (2026-09-08): Einladungstexte — freigegebener Text, weiss auf gelblichem Grund, eigenes
   Scrollen im Koerper, damit ein langer Text die Faktenspalte nicht in die Hoehe sprengt. */
.wi-agent-facts-panel__invites {
	flex: 0 0 auto;
	max-height: 40vh;
	overflow-y: auto;
	padding: 12px 16px;
	background: #fffdf5;
	border-top: 1px solid #f0dfa8;
	font-size: 13px;
	line-height: 1.5;
	color: #3d2f00;
	white-space: pre-wrap;
	word-break: break-word;
}
.wi-agent-facts-panel__invites[hidden] {
	display: none;
}
.wi-agent-facts-acc--invites[hidden] {
	display: none;
}
/* F4 (THEMA-wi-einladungstexte-speichern-verbessern): Kanal-Untermenue im Faktenpanel. */
.wi-agent-invites-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 16px;
}
.wi-agent-invites-chan {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: left;
	cursor: pointer;
	padding: 8px 10px;
	border: 1px solid #e3d6a8;
	border-radius: 6px;
	background: #fffdf5;
	color: #3d2f00;
	font-size: 13px;
	font-weight: 600;
}
.wi-agent-invites-chan:hover,
.wi-agent-invites-chan:focus {
	background: #fff3d1;
	border-color: #d4b65a;
}
.wi-agent-invites-chan--main::after {
	content: attr(data-label);
	margin-left: auto;
	font-size: 10px;
	font-weight: 600;
	color: #2271b1;
}
.wi-agent-invites-legacy {
	margin: 0;
}
/* Tobias 2026-09-15: Kanal-Text direkt im Faktenpanel (Copy je Sorte + "Alles kopieren"). */
.wi-agent-invite-detail {
	padding: 12px 16px 16px;
	border-top: 1px solid #f0dfa8;
}
.wi-agent-invite-detail__head {
	margin-bottom: 10px;
}
.wi-agent-invite-detail__chan {
	font-size: 12px;
	font-weight: 600;
	color: #2271b1;
	background: #f0f6fc;
	padding: 2px 10px;
	border-radius: 10px;
}
.wi-agent-invite-detail__kinds {
	border: 1px solid #dcdcde;
	border-radius: 6px;
	padding: 10px 12px;
	background: #fff;
	max-height: 40vh;
	overflow-y: auto;
}
.wi-agent-invite-detail__kind {
	margin: 0 0 12px;
}
.wi-agent-invite-detail__kind:last-child {
	margin-bottom: 0;
}
.wi-agent-invite-detail__kind-title {
	font-weight: 600;
	font-size: 12px;
	color: #1d2327;
}
.wi-agent-invite-detail__kind-text {
	margin: 4px 0 6px;
	white-space: pre-wrap;
	word-break: break-word;
	color: #1d2327;
	font-size: 13px;
	line-height: 1.55;
}
.wi-agent-invite-detail__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}
.wi-agent-invite-detail__edit {
	color: #2271b1;
}
.wi-agent-invite-detail__stats {
	margin-top: 12px;
	border-top: 1px dashed #dcdcde;
	padding-top: 10px;
}
.wi-agent-invite-detail__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0 0 6px;
	font-size: 12px;
	color: #50575e;
	word-break: break-word;
}
.wi-agent-invite-detail__link-stats {
	color: #1d2327;
	font-weight: 600;
	white-space: nowrap;
}
/* THEMA-wi-approved-texts (Tobias 2026-10-05): Akkordeon "Freigegebene Texte" im Faktenpanel. */
.wi-agent-facts-panel__approved[hidden],
.wi-agent-facts-acc--approved[hidden] {
	display: none;
}
.wi-agent-approved__group {
	padding: 12px 16px 0;
}
.wi-agent-approved__group-title {
	font-size: 12px;
	font-weight: 600;
	color: #2271b1;
	margin-bottom: 6px;
}
.wi-agent-approved__block {
	margin: 0 0 12px;
	padding: 8px 10px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #fff;
}
.wi-agent-approved__block-label {
	font-size: 11px;
	font-weight: 600;
	color: #50575e;
	margin-bottom: 4px;
}
.wi-agent-approved__block-text {
	white-space: pre-wrap;
	word-break: break-word;
	color: #1d2327;
	font-size: 13px;
	line-height: 1.55;
	margin-bottom: 8px;
	max-height: 40vh;
	overflow-y: auto;
}
.wi-agent-approved__actions {
	display: flex;
	gap: 8px;
	padding: 0 16px 12px;
}
.wi-agent-approved__ref {
	margin: 0;
	padding: 0 16px 12px;
	font-size: 12px;
	color: #646970;
}
/* Display-only-Zeile im Chatfenster: gross, kopierbar, kein KI-Versand. */
.wi-agent-msg--invite {
	padding: 12px 16px;
}
.wi-agent-invite-msg__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.wi-agent-invite-msg__chan {
	font-size: 12px;
	font-weight: 600;
	color: #2271b1;
	background: #f0f6fc;
	padding: 2px 10px;
	border-radius: 10px;
}
.wi-agent-invite-msg__body {
	max-height: 40vh;
	overflow-y: auto;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	padding: 10px 12px;
	background: #fff;
}
.wi-agent-invite-msg__kind {
	margin: 0 0 12px;
}
.wi-agent-invite-msg__kind:last-child {
	margin-bottom: 0;
}
.wi-agent-invite-msg__text {
	margin: 4px 0 0;
	white-space: pre-wrap;
	word-break: break-word;
	color: #1d2327;
	font-size: 14px;
	line-height: 1.55;
}
.wi-agent-invite-msg__actions {
	margin-top: 10px;
}
.wi-agent-instinct__summary {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	cursor: pointer;
	padding: 10px 16px;
	font-size: 11px;
	font-weight: 600;
	color: #646970;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.wi-agent-instinct__summary::-webkit-details-marker {
	display: none;
}
.wi-agent-instinct__summary::before {
	content: "\25B8";
	font-size: 10px;
	color: #8c8f94;
	transition: transform 0.15s ease;
}
.wi-agent-instinct[open] .wi-agent-instinct__summary::before {
	transform: rotate( 90deg );
}
.wi-agent-instinct__label {
	flex: 1 1 auto;
}
.wi-agent-instinct__info {
	flex: 0 0 auto;
	color: #2271b1;
	font-size: 13px;
	line-height: 1;
	cursor: help;
}
.wi-agent-instinct__body {
	padding: 0 16px 12px;
}
.wi-agent-instinct__list {
	margin: 0 0 8px;
	padding-left: 16px;
	font-size: 12px;
	line-height: 1.5;
	color: #1d2327;
}
.wi-agent-instinct__list li {
	margin: 0 0 3px;
	word-break: break-word;
}
.wi-agent-instinct__correct {
	margin: 0;
	font-size: 11px;
	line-height: 1.45;
	color: #8c8f94;
}
.wi-agent-facts-panel__ready {
	flex: 0 0 auto;
	padding: 10px 16px;
	border-top: 1px solid #cfe9d6;
	font-weight: 600;
	color: #00713a;
	font-size: 12px;
	line-height: 1.4;
	background: #f2fbf5;
}
.wi-fluid-optrow .button {
	border-radius: 16px;
	white-space: normal;
	height: auto;
	padding: 6px 14px;
}
/* The facts panel must NEVER sit below the chat (Tobias 2026-07-26): either it is
   beside the chat, or it slides in over it. Nothing in between — a panel underneath
   pushes the conversation off screen and the host loses the thread. The old
   flex-direction:column state between 769px and 1024px did exactly that, because the
   overlay only started at 768px. Both thresholds are 1024px now. */

/* P1.4: visible recording / transcribing state on the Speak row (red, pulsing) so the host sees
   something is happening while capturing and while the transcript is still being produced. */
@keyframes wiAgentMicPulse {
	0%   { box-shadow: 0 0 0 0 rgba( 214, 54, 56, 0.45 ); }
	70%  { box-shadow: 0 0 0 7px rgba( 214, 54, 56, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 214, 54, 56, 0 ); }
}
.wi-agent-pill--mic.wi-agent-mic--recording,
.wi-agent-pill--mic.wi-agent-mic--transcribing {
	border-color: #d63638 !important;
	color: #d63638 !important;
	background: #fcf0f1;
	animation: wiAgentMicPulse 1.4s ease-out infinite;
}
.wi-agent-pill--mic.wi-agent-mic--recording .dashicons {
	color: #d63638;
}
.wi-agent-pill--mic.wi-agent-mic--transcribing {
	animation-duration: 1s;
}
@media ( prefers-reduced-motion: reduce ) {
	.wi-agent-pill--mic.wi-agent-mic--recording,
	.wi-agent-pill--mic.wi-agent-mic--transcribing {
		animation: none;
	}
}

/* P1.6: attach/upload affordance + drag-and-drop zone in the composer. */
.wi-agent-pill--upload {
	padding: 8px 10px;
}
.wi-agent-pill--upload .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	margin: 0;
}
.wi-agent-dropzone {
	position: absolute;
	inset: 3px;
	z-index: 3;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 2px dashed #2271b1;
	border-radius: 14px;
	background: rgba( 240, 246, 252, 0.94 );
	color: #135e96;
	font-size: 13px;
	font-weight: 600;
	pointer-events: none;
	text-align: center;
	padding: 8px;
}
.wi-agent-dropzone.is-active {
	display: flex;
}
.wi-agent-dropzone .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}
.wi-agent-composer--dragover {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

/* P2.11: readable agent replies — paragraph spacing + a one-time subtle sidebar hint. */
.wi-agent-msg--agent .wi-agent-msg-p {
	margin: 0 0 10px;
	line-height: 1.55;
	white-space: normal;
}
.wi-agent-msg--agent .wi-agent-msg-p:last-child {
	margin-bottom: 0;
}
/* #Bullets (2026-09-03): Assistenten-Listen ("- …"-Zeilen) als echte Bullet Points. Das <ul>
   sitzt im Nachrichten-Block; die Disc-Marker stammen aus list-style: disc. */
.wi-agent-msg--agent ul.wi-agent-bullets {
	margin: 0 0 10px 20px;
	padding: 0;
	list-style: disc;
}
.wi-agent-msg--agent ul.wi-agent-bullets li {
	margin: 0 0 3px;
	line-height: 1.55;
}
.wi-agent-msg--agent ul.wi-agent-bullets li:last-child {
	margin-bottom: 0;
}
/* #Farben: "#RRGGBB" Hex-Codes als farbiger Balken (Text auf der Farbe). */
.wi-agent-msg--agent .wi-hex {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 4px;
	font-weight: 600;
	letter-spacing: 0.3px;
	vertical-align: baseline;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
}
.wi-agent-facts-hint {
	margin: 4px 0 10px;
	padding: 6px 12px;
	font-size: 12px;
	font-style: italic;
	color: #646970;
	border-left: 3px solid #dcdcde;
	background: #f6f7f7;
	border-radius: 0 8px 8px 0;
}
/* #versionsgate (Tobias 2026-10-15): Versions-Banner im Backend-/Studio-Agenten. Sagt in einer
   Zeile, dass diese Funktion eine neuere Plugin-Fassung braucht (oder erst die Lizenz aktiv sein
   muss), und bietet die Chips an. Ruhiger Hinweis, keine Fehlermeldung.
   Der Slot sitzt AUSSERHALB des Threads (Pruefer-Fund §NEU 1) — leer nimmt er keinen Platz ein. */
.wi-agent-version-banner-slot:empty {
	display: none;
}
.wi-agent-version-banner {
	margin: 4px 0 12px;
	padding: 10px 12px;
	border: 1px solid #dcdcde;
	border-left: 3px solid #dba617;
	background: #fffdf6;
	border-radius: 0 8px 8px 0;
}
.wi-agent-version-banner__text {
	margin: 0 0 8px;
	font-weight: 600;
	line-height: 1.4;
	color: #1d2327;
}
.wi-agent-version-banner__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.wi-agent-version-chip {
	display: inline-block;
	border: 1px solid #c3c4c7;
	background: #ffffff;
	color: #1d2327;
	border-radius: 8px;
	padding: 6px 12px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.wi-agent-version-chip:hover {
	background-color: #f0f0f1;
	color: #1d2327;
}
.wi-agent-version-chip--primary {
	background: #2271b1;
	border-color: #2271b1;
	color: #ffffff;
}
.wi-agent-version-chip--primary:hover {
	background: #135e96;
	border-color: #135e96;
	color: #ffffff;
}
/* Sekundaerer Reload-Knopf (Fall A, Pruefer-Fund FUND 4) — klein + zurueckhaltend, wie
   .wi-fea-hardreload im Mini. */
.wi-agent-version-reload {
	border: 1px solid #c3c4c7;
	background: #ffffff;
	color: #1d2327;
	cursor: pointer;
	border-radius: 8px;
	padding: 6px 12px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	transition: background-color 0.15s ease;
}
.wi-agent-version-reload:hover {
	background-color: #f0f0f1;
}

/* #0f: one-time "select text to quote it" hint (shown once ever per user, see wi-agent-admin.js). */
.wi-agent-quote-hint {
	margin: 4px 0 10px;
	padding: 6px 12px;
	font-size: 12px;
	font-style: italic;
	color: #646970;
	border-left: 3px solid #dcdcde;
	background: #f6f7f7;
	border-radius: 0 8px 8px 0;
}

/* ===========================================================================
   P3.12/13/15 — sidebar edit pencils, quote-in-chat, task list, busy build,
   lifecycle badge, mobile drawer.
   =========================================================================== */

/* P3.12 — on-hover edit pencil per fact row/cell. */
.wi-agent-fact-row,
.wi-agent-facts-grid .wi-agent-fact-cell {
	position: relative;
}
.wi-agent-fact-key {
	padding-right: 22px;
}
.wi-agent-fact-edit {
	position: absolute;
	top: 4px;
	right: -2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: #2271b1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.12s ease, background 0.12s ease;
}
.wi-agent-fact-edit .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 1;
}
.wi-agent-fact-row:hover .wi-agent-fact-edit,
.wi-agent-facts-grid .wi-agent-fact-cell:hover .wi-agent-fact-edit,
.wi-agent-fact-edit:focus-visible {
	opacity: 1;
}
.wi-agent-fact-edit:hover {
	background: #f0f6fc;
}

/* P3.12/13 — composer edit target (field or quoted snippet) above the input. */
.wi-agent-composer-target {
	margin: 0 0 8px;
}
.wi-agent-ctx {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	background: #f0f6fc;
	border: 1px solid #c3d4e0;
	border-left: 3px solid #2271b1;
}
.wi-agent-ctx--quote {
	background: #f6f7f7;
	border-left-color: #646970;
}
.wi-agent-ctx__icon {
	flex: 0 0 auto;
	color: #2271b1;
	font-size: 16px;
	width: 16px;
	height: 16px;
	margin-top: 1px;
}
.wi-agent-ctx--quote .wi-agent-ctx__icon {
	color: #646970;
}
.wi-agent-ctx__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wi-agent-ctx__label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #50575e;
}
.wi-agent-ctx__body {
	font-size: 13px;
	line-height: 1.4;
	color: #1d2327;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}
.wi-agent-ctx__x {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: #646970;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}
.wi-agent-ctx__x:hover {
	color: #d63638;
}

/* P3.13 — "Quote in chat" button on text selection. Docked to the bottom-right corner of the
   conversation area (not the selection point) so it never lands on top of a paragraph, the
   thread header, or another button. Muted by default — available, not urgent; solid on hover. */
.wi-agent-quote-btn {
	position: fixed;
	z-index: 100000;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border: 0;
	border-radius: 16px;
	background: rgba(29, 35, 39, 0.62);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	opacity: 0.85;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	transition: opacity 0.12s ease, background 0.12s ease;
}
.wi-agent-quote-btn .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}
.wi-agent-quote-btn:hover,
.wi-agent-quote-btn:focus-visible {
	background: rgba(29, 35, 39, 0.92);
	opacity: 1;
}

/* P3.12/15 — field-edit + task-choice chip rows. */
.wi-agent-fieldedit__lead {
	margin: 0 0 6px;
	font-size: 12px;
	color: #50575e;
}
.wi-agent-fieldedit__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.wi-agent-fieldedit__row .button,
.wi-agent-taskchoice .wi-agent-fieldedit__row .button {
	border-radius: 16px;
	white-space: normal;
	height: auto;
	padding: 6px 14px;
}

/* P3.15 — task list under the facts. */
.wi-agent-facts-panel__tasks {
	background: #fff;
	padding: 10px 16px 12px;
}
.wi-agent-tasks__head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px;
}
.wi-agent-tasks__title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #646970;
}
.wi-agent-tasks__intro {
	margin: 0 0 8px;
	font-size: 11px;
	line-height: 1.45;
	color: #8c8f94;
}
.wi-agent-tasks__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.wi-agent-task {
	margin: 0 0 6px;
}
.wi-agent-task:last-child {
	margin-bottom: 0;
}
.wi-agent-task__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: left;
	padding: 8px 10px;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	background: #fafafa;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}
.wi-agent-task__btn:hover {
	border-color: #2271b1;
	background: #f0f6fc;
}
.wi-agent-task.is-high .wi-agent-task__btn {
	border-left: 3px solid #d63638;
}
.wi-agent-task.is-critical .wi-agent-task__btn {
	border-left: 3px solid #dba617;
}
.wi-agent-task__check {
	flex: 0 0 auto;
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: #2271b1;
}
.wi-agent-task.is-done .wi-agent-task__check {
	color: #00a32a;
}
.wi-agent-task__label {
	flex: 1 1 auto;
	font-size: 13px;
	line-height: 1.35;
	color: #1d2327;
	word-break: break-word;
}
.wi-agent-task.is-done .wi-agent-task__label {
	text-decoration: line-through;
	color: #8c8f94;
}
.wi-agent-task__cta {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	color: #2271b1;
	white-space: nowrap;
}
/* C8: the real settings/install link, sitting under the task row so it never overlaps the
   chat-trigger button and is never confused with it. */
.wi-agent-task__link {
	display: inline-block;
	margin: 4px 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	color: #2271b1;
	text-decoration: underline;
}
.wi-agent-task__link:hover,
.wi-agent-task__link:focus {
	color: #135e96;
}
/* TASK-LIST EXTENSION (Tobias 2026-09-11): the assistant's own list gets an interactive tick
   beside the route-to-chat button — the host's confirmation, click = accepted. */
.wi-agent-task.is-fact {
	display: flex;
	align-items: stretch;
	gap: 6px;
}
.wi-agent-task.is-fact .wi-agent-task__btn {
	flex: 1 1 auto;
	min-width: 0;
}
.wi-agent-task__tick {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	padding: 0;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	background: #fafafa;
	color: #8c8f94;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.wi-agent-task__tick:hover,
.wi-agent-task__tick:focus-visible {
	border-color: #00a32a;
	background: #f0fbf3;
	color: #00a32a;
}
.wi-agent-task.is-done .wi-agent-task__tick {
	color: #00a32a;
	border-color: #b8e6c4;
}
.wi-agent-tasks__confirm-all {
	margin-left: auto;
	font-size: 11px;
	font-weight: 600;
	color: #2271b1;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
}
.wi-agent-tasks__confirm-all:hover,
.wi-agent-tasks__confirm-all:focus-visible {
	color: #135e96;
}

/* Build/update WORKING state — animated like the mic pulse. */
@keyframes wiAgentBtnBusy {
	0%   { box-shadow: 0 0 0 0 rgba(34, 113, 177, 0.45); }
	70%  { box-shadow: 0 0 0 7px rgba(34, 113, 177, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 113, 177, 0); }
}
.wi-agent-btn-busy {
	position: relative;
	animation: wiAgentBtnBusy 1.4s ease infinite;
	pointer-events: none;
	opacity: 0.95;
}

/* Lifecycle badge variants. */
.wi-agent-facts-panel__ready.is-building {
	color: #2271b1;
	background: #f0f6fc;
	border-top-color: #c3d4e0;
}
.wi-agent-facts-panel__ready.is-draft {
	color: #8a6d00;
	background: #fcf9e8;
	border-top-color: #f0e6b8;
}
.wi-agent-facts-panel__ready.is-published {
	color: #00713a;
	background: #f2fbf5;
	border-top-color: #cfe9d6;
}

/* Mobile facts drawer toggle (hidden on desktop). */
.wi-agent-facts-toggle {
	display: none;
}
.wi-agent-facts-close {
	display: none;
}

/* ===========================================================================
   Mobile / responsive (<=1024px): single column, chat full width, facts as a
   collapsible drawer, input pinned bottom, buttons wrap, title truncated.
   =========================================================================== */
@media ( max-width: 1024px ) {
	.wi-agent-layout {
		flex-direction: column;
	}
	.wi-agent-shell {
		min-width: 0;
	}
	.wi-agent-page-title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.wi-agent-session-title {
		max-width: 45vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/* Facts panel becomes an off-canvas drawer from the right. */
	.wi-agent-facts-panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		width: min(88vw, 360px);
		max-height: 100%;
		border-radius: 0;
		border-left: 1px solid #dcdcde;
		transform: translateX(102%);
		transition: transform 0.22s ease;
		box-shadow: -6px 0 20px rgba(0, 0, 0, 0.18);
	}
	.wi-agent-drawer-open .wi-agent-facts-panel {
		transform: translateX(0);
	}
	/* REVIDIERT 2026-09-09 (Tobias, Handoff-E2E mobile): das Fakten-Overlay MUSS das
	   Eingabefeld überdecken statt darunter zu enden. Der alte Fix (27.07.) hob die
	   Composer-Leiste auf z-index 100000 ÜBER das Panel (99999), damit der Senden-Pfeil
	   nie verdeckt wird — die Folge war: die unteren ~190px des Fakten-Panels lagen
	   dauerhaft unter dem Dock, der Accordion passte seinen Inhalt an die volle Höhe an
	   (scrollHeight == clientHeight) und konnte NICHT scrollen. Die letzten Fakten waren
	   unsichtbar und unerreichbar. Jetzt liegt das Panel über dem Dock: echtes Overlay,
	   der ganze Accordion ist sichtbar und scrollt; geschlossen wird über das X oben. */
	.wi-agent-drawer-open .wi-agent-dock {
		z-index: 99998;
	}
	.wi-agent-facts-panel__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.wi-agent-facts-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border: 0;
		background: transparent;
		font-size: 22px;
		line-height: 1;
		color: #646970;
		cursor: pointer;
	}
	/* Toolbar toggle, top right with the other icons — blue so it reads as the way in
	   to the facts while the panel is off screen. */
	.wi-agent-facts-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #2271b1;
		border-color: #2271b1;
		color: #fff;
	}
	.wi-agent-facts-toggle:hover,
	.wi-agent-facts-toggle:focus-visible {
		background: #135e96;
		border-color: #135e96;
		color: #fff;
	}
	.wi-agent-facts-toggle .dashicons {
		color: #fff;
		font-size: 16px;
		width: 16px;
		height: 16px;
	}
	/* Mobile Auto-Reveal (Tobias 2026-09-09): nach einer Uebergabe pulsiert der
	   "Dein Webinar"-Knopf, bis der Host ihn selbst einmal geoeffnet hat — so weiss er,
	   dass sein Gold dort liegt, ohne dass wir es ihm extra erklaeren muessen. */
	@keyframes wiAgentFactsTogglePulse {
		0%   { box-shadow: 0 0 0 0 rgba( 34, 113, 177, 0.55 ); }
		70%  { box-shadow: 0 0 0 8px rgba( 34, 113, 177, 0 ); }
		100% { box-shadow: 0 0 0 0 rgba( 34, 113, 177, 0 ); }
	}
	.wi-agent-facts-toggle--hint {
		animation: wiAgentFactsTogglePulse 1.4s ease-out infinite;
	}
	@media ( prefers-reduced-motion: reduce ) {
		.wi-agent-facts-toggle--hint {
			animation: none;
		}
	}
	/* Stays put while the drawer is open — it is the way back out, and a button that
	   vanishes on click leaves a hole in the toolbar. */
	.wi-agent-drawer-open .wi-agent-facts-toggle {
		background: #135e96;
		border-color: #135e96;
	}
	/* Composer pinned to the bottom, action buttons wrap. */
	.wi-agent-dock {
		position: sticky;
		bottom: 0;
		background: #f0f0f1;
		padding-top: 6px;
		z-index: 50;
	}
	.wi-agent-composer-bar {
		gap: 6px;
		/* The one narrow-screen exception to "alles in einer Zeile": below this the
		   composer lets the action buttons wrap instead of clipping. */
		flex-wrap: wrap;
	}
	.wi-agent-composer-actions {
		/* f (Tobias 2026-09-09): one line on mobile — the action row never wraps.
		   Icons keep their fixed tap size (upload/mic/send, flex-shrink:0), only the
		   Create button takes the free space. */
		flex-wrap: nowrap;
		gap: 6px;
	}
	.wi-agent-composer-pills {
		flex-wrap: wrap;
	}
	.wi-agent-composer-actions .button {
		flex: 0 0 auto;
	}
	.wi-agent-composer-actions #wi-agent-confirm {
		flex: 1 1 auto;
		min-width: 0;
	}
	.wi-agent-composer-actions .wi-agent-pill--upload,
	.wi-agent-composer-actions .wi-agent-mic,
	.wi-agent-composer-actions #wi-agent-send {
		flex-shrink: 0;
	}
	.wi-agent-composer-actions .wi-agent-pill--upload,
	.wi-agent-composer-actions #wi-agent-send {
		flex: 0 0 44px;
	}
	/* M2: die Aktionsleiste bleibt EINE horizontal scrollbare Reihe (Basis-Regel) —
	   der frühere flex-wrap: wrap hier wird bewusst NICHT mehr gesetzt. */

	/* Top row stays ONE row (Tobias 2026-07-26): the icons were dropping onto a second
	   line, which pushed the chat down and made the header look broken. Icons keep their
	   size and the title gives way instead — it is the only element that can truncate
	   without losing a function. */
	.wi-agent-toolbar {
		flex-wrap: nowrap;
		gap: 4px;
		min-width: 0;
	}
	.wi-agent-toolbar-start,
	.wi-agent-toolbar-end {
		flex-wrap: nowrap;
		gap: 4px;
		min-width: 0;
	}
	.wi-agent-toolbar-end {
		flex: 0 0 auto;
	}
	.wi-agent-toolbar-btn--icon {
		width: 30px;
		height: 30px;
		padding: 0;
		flex: 0 0 auto;
	}
	.wi-agent-toolbar-title,
	#wi-agent-session-title {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Bottom row: nothing may be clipped. Every child wraps, not just .button — the
	   confirm button carries its own class and was being cut off mid-word. */
	/* M2: .wi-agent-actionbar__row bleibt hier bewusst AUSgenommen — sie ist der
	   horizontale Scroller (Basis-Regel) und darf nicht auf overflow-x: visible /
	   flex: 0 1 auto / white-space: normal zurückfallen. Composer bleibt wie bisher. */
	.wi-agent-dock,
	.wi-agent-composer-bar,
	.wi-agent-composer-actions {
		min-width: 0;
		overflow-x: visible;
	}
	.wi-agent-composer-actions > * {
		flex: 0 1 auto;
		min-width: 0;
	}
	.wi-agent-composer-actions .button {
		white-space: normal;
	}
}

/* #A1266 Empty state: honest scope + ways to start a real conversation. */
.wi-agent-empty-scope { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin: 18px auto 6px; max-width: 620px; text-align: left; }
.wi-agent-empty-scope__col { flex: 1 1 240px; }
.wi-agent-empty-scope__head { margin: 0 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #646970; }
.wi-agent-empty-scope__body { margin: 0; font-size: 13px; line-height: 1.5; color: #3c434a; }
.wi-agent-empty-start { margin: 14px auto 8px; max-width: 560px; font-size: 14px; color: #1d2327; }
.wi-agent-empty-openers { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
@media (max-width: 600px) { .wi-agent-empty-scope { gap: 14px; } }

/* P131/2 "Short and done today" — its own way in, above the three openers.
   Kept visually calm on purpose: short is a deliberate format, not a cheap
   fallback, so no loud badge and no "save time" framing. */
.wi-agent-shortpath { max-width: 560px; margin: 20px auto 4px; padding: 16px 18px; border: 1px solid #c3c4c7; border-left: 3px solid #2271b1; border-radius: 4px; background: #fff; text-align: left; }
.wi-agent-shortpath__title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #1d2327; }
.wi-agent-shortpath__body { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #3c434a; }
.wi-agent-shortpath__classic { margin: 10px 0 0; font-size: 12px; color: #646970; }
@media (max-width: 600px) { .wi-agent-shortpath__btn { width: 100%; } }

/* #A1268 "Feels stuck" restart link under the composer. */
.wi-agent-restart-hint { margin: 6px 0 0; text-align: center; }
.wi-agent-restart-link { font-size: 12px; color: #646970; text-decoration: underline; }
.wi-agent-restart-link:hover { color: #2271b1; }

/* #A1269 Hovering "leave the dropdown empty" points at the actual target pill. */
.wi-agent-dd-hint { border-bottom: 1px dotted #8c8f94; cursor: help; }
.wi-agent-pill--target.is-pointed { box-shadow: 0 0 0 3px rgba(34,113,177,.35); border-color: #2271b1; transition: box-shadow .15s ease; }

/* #A1270 Sparks + Ideas get the same "here I am" cue as the target pill. */
/* #A1282: mark the CARDS, not the container. A ring around a full-width box is
   almost invisible — the same cue as the pills only reads when it sits on the
   thing the sentence points at. */
.wi-agent-empty-chips.is-pointed .wi-agent-empty-chip {
	border-color: #2271b1;
	box-shadow: 0 0 0 3px rgba(34,113,177,.28);
	transition: box-shadow .15s ease, border-color .15s ease;
}
.wi-agent-pill.is-pointed { box-shadow: 0 0 0 3px rgba(34,113,177,.35); border-color: #2271b1; transition: box-shadow .15s ease; }


/* ---------------------------------------------------------------------------
   "Working on it" — the real WebinarIgnition flame (#A1276).
   images/logo-avatar.png is the actual logo artwork; the flicker is CSS on top
   of it. Two layers move against each other — the flame body breathes while a
   soft glow behind it swells — which reads as burning without sprite frames,
   an extra request per frame, or a JS timer during the model call.
   --------------------------------------------------------------------------- */
.wi-agent-thinking {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 2px 10px;
}

.wi-agent-flame-wrap {
	position: relative;
	display: inline-flex;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
}

/* The glow sits behind the artwork and pulses on its own rhythm, so the two
   never line up into a mechanical loop. */
.wi-agent-flame-wrap::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 255, 138, 0, 0.5 ) 0%, rgba( 255, 87, 34, 0 ) 70% );
	animation: wi-flame-glow 1.5s ease-in-out infinite;
}

.wi-agent-flame {
	position: relative;
	width: 26px;
	height: 26px;
	display: block;
	transform-origin: 50% 92%;
	animation: wi-flame-burn 1.1s ease-in-out infinite;
}

.wi-agent-thinking__label {
	color: #646970;
	font-size: 13px;
}

/* Squash and lean, anchored at the base — how a real flame moves. */
@keyframes wi-flame-burn {
	0%, 100% { transform: scale( 1, 1 ) skewX( 0deg ); }
	25%      { transform: scale( 0.95, 1.07 ) skewX( -2.5deg ); }
	55%      { transform: scale( 1.04, 0.96 ) skewX( 2deg ); }
	78%      { transform: scale( 0.98, 1.03 ) skewX( -1deg ); }
}

@keyframes wi-flame-glow {
	0%, 100% { opacity: 0.45; transform: scale( 0.92 ); }
	50%      { opacity: 0.9;  transform: scale( 1.08 ); }
}

/* Respect the OS setting — a steady flame instead of a flickering one. */
@media ( prefers-reduced-motion: reduce ) {
	.wi-agent-flame,
	.wi-agent-flame-wrap::before {
		animation: none;
	}
}

/* The ⋯ button acknowledges the learning notice landing in it (#A1278). */
.wi-agent-toolbar-btn--received {
	animation: wi-menu-received 0.55s ease;
}

@keyframes wi-menu-received {
	0%, 100% { transform: scale( 1 ); box-shadow: none; }
	40%      { transform: scale( 1.16 ); box-shadow: 0 0 0 4px rgba( 34, 113, 177, 0.18 ); }
}

/* Restart-with-facts (#A1279): the cold-start pitch is wrong here — those questions are
   already answered. Only the resumed block and the composer remain. */
.wi-agent-empty--resumed .wi-agent-empty-kicker,
.wi-agent-empty--resumed .wi-agent-empty-title,
.wi-agent-empty--resumed .wi-agent-empty-lead,
.wi-agent-empty--resumed .wi-agent-empty-scope,
.wi-agent-empty--resumed .wi-agent-empty-start,
.wi-agent-empty--resumed #wi-agent-shortpath,
.wi-agent-empty--resumed #wi-agent-empty-openers,
.wi-agent-empty--resumed #wi-agent-empty-chips {
	display: none;
}

.wi-agent-empty-resumed {
	max-width: 560px;
	margin: 28px auto 8px;
	text-align: center;
}

.wi-agent-empty-resumed__lead {
	font-size: 15px;
	color: #1d2327;
	margin: 0 0 14px;
}

.wi-agent-empty-resumed__hint {
	font-size: 13px;
	color: #646970;
	margin: 0 0 8px;
}

/* #A1305 Dominant entry choice: webinars already exist, so "new vs. improve" is decided
   first, in flow with the text above it. Both buttons are blue and equal weight — neither
   reads as the default. Once picked, the block disappears and the rest of the empty state
   (openers + sparks) appears. */
.wi-agent-empty--awaiting-choice #wi-agent-empty-start,
.wi-agent-empty--awaiting-choice #wi-agent-shortpath,
.wi-agent-empty--awaiting-choice #wi-agent-empty-openers,
.wi-agent-empty--awaiting-choice #wi-agent-empty-chips {
	display: none;
}

/* B2/B3 (Tobias 2026-10-05): "Was sollen wir gestalten?" und die beiden Buttons gehören NUR
   auf den ersten Screen. Sobald der Host entschieden hat (Knopf gedrückt / ein Zug gelaufen),
   fällt der obere Pitch weg — dann steht das Neue sofort oben, statt dass er den schon
   gelesenen Text nochmal überfliegt und sich im Scrollen verliert. */
.wi-agent-empty--decided .wi-agent-empty-kicker,
.wi-agent-empty--decided .wi-agent-empty-title,
.wi-agent-empty--decided .wi-agent-empty-lead,
.wi-agent-empty--decided .wi-agent-empty-scope,
.wi-agent-empty--decided #wi-agent-choice {
	display: none;
}

.wi-agent-choice {
	max-width: 560px;
	margin: 16px auto 10px;
	text-align: center;
}

.wi-agent-choice__text {
	margin: 0 0 12px;
	font-size: 14px;
	color: #1d2327;
}

.wi-agent-choice__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.wi-agent-choice__btn {
	flex: 0 1 220px;
}

/* BAROMETER (Tobias 2026-08-13, "ran und promter ins plugin") — four calm stages instead of a
   percentage, sitting between the panel head and the collected facts. Tobias 2026-07-30 on why it
   exists at all: "ein Grund weiterzumachen mit den nervigen Fragen". Deliberately quiet: no red, no
   score, no progress bar. A bar that fills up reads like a grade, and a grade is exactly what this
   must not be — the four dots say where the TEXTS stand, never how well the host is doing.
   Markup: inc/wi-agent-rest.php · behaviour: wiRenderQualityBarometer() in wi-agent-admin.js */
.wi-agent-quality {
	flex: 0 0 auto;
	padding: 12px 16px;
	border-bottom: 1px solid #ececed;
	background: #fbfbfc;
	/* P6 (2026-09-08, Tobias UX-Runde, 13"-Layout): das Barometer kollabiert und vergroessert
	   sich beim Mouse-in (bzw. Focus) — so bleibt Platz fuer die Faktenspalte und das
	   Akkordeon "Einladungstexte". Auf Touch/Small bleibt es offen.
	   G6 (2026-09-08, Diktat Tobias): die kollabierte Einzeile zeigt Titel + aktuellen Status
	   (Badge #wi-agent-quality-current), nicht erst bei Hover. 2. Fix-Runde: Badge INLINE in
	   der Titelzeile (flex) — der Kollaps bleibt "eine Zeile" und kappt nie, auch bei langem
	   Titel, der auf schmalem 13"-Panel umbricht. */
	overflow: hidden;
	max-height: 76px;
	transition: max-height .3s ease;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 6px;
	row-gap: 4px;
}
.wi-agent-quality__current {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: #2271b1;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
}
.wi-agent-quality__current[hidden] {
	display: none;
}
.wi-agent-quality:hover,
.wi-agent-quality:focus-within {
	max-height: 340px;
}
@media (max-width: 782px) {
	.wi-agent-quality { max-height: none; }
}
.wi-agent-quality[hidden] {
	display: none;
}
.wi-agent-quality__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: #1d2327;
}
.wi-agent-quality__help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-inline-start: 5px;
	border-radius: 50%;
	background: #dcdcde;
	color: #50575e;
	font-size: 10px;
	font-weight: 700;
	cursor: help;
	vertical-align: text-bottom;
	flex: 0 0 auto;
}
.wi-agent-quality__stages {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}
/* Every stage stays readable from the start — a stage not reached yet is dimmed, never hidden, so
   the host can see where this is going and can pick one himself. */
.wi-agent-quality__stage {
	flex: 1 1 auto;
	padding: 5px 8px;
	border: 1px solid #dcdcde;
	border-radius: 999px;
	background: #fff;
	color: #8c8f94;
	font-size: 11px;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wi-agent-quality__stage:hover,
.wi-agent-quality__stage:focus-visible {
	border-color: #a7aaad;
	color: #1d2327;
}
.wi-agent-quality__stage.is-reached {
	border-color: #b8dfc4;
	background: #eef8f1;
	color: #2d6a41;
}
.wi-agent-quality__stage.is-current {
	border-color: #4f9a68;
	background: #dff1e5;
	color: #1e4d2f;
	font-weight: 600;
}
/* The one motivating sentence about the NEXT stage. Empty once "Sounds like you" is reached — then
   there is nothing left to ask for and an encouraging line would be noise. */
.wi-agent-quality__next {
	flex-basis: 100%;
	margin: 8px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: #50575e;
}
.wi-agent-quality__next:empty {
	display: none;
}
.wi-agent-quality__mode {
	flex-basis: 100%;
	margin: 8px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: #646970;
	font-style: italic;
}
.wi-agent-quality__auto {
	flex-basis: 100%;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: #2271b1;
	font-size: 11px;
	text-decoration: underline;
	cursor: pointer;
}

/* Strang A (2026-08-17): the Settings modal — a readable reference to the writable global
   settings, grouped by Settings-page tab, with a deep link to each field. No inline writing:
   install-wide changes still go through the chat agent with its #E-0nn announce+agree step. */
.wi-agent-settings-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.wi-agent-settings-modal[hidden] {
	display: none;
}
.wi-agent-settings-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}
.wi-agent-settings-modal__box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(760px, 100%);
	max-height: min(84vh, 720px);
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}
.wi-agent-settings-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid #e2e4e7;
	background: #f6f7f7;
}
.wi-agent-settings-modal__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 600;
	color: #1d2327;
}
.wi-agent-settings-modal__close {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #646970;
	font-size: 13px;
}
.wi-agent-settings-modal__body {
	padding: 16px 18px 20px;
	overflow-y: auto;
}
.wi-agent-settings-module {
	margin-bottom: 18px;
}
.wi-agent-settings-module:last-child {
	margin-bottom: 0;
}
.wi-agent-settings-module__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.wi-agent-settings-module__title {
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 600;
	color: #1d2327;
}
.wi-agent-settings-module__fields {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	overflow: hidden;
}
.wi-agent-settings-field {
	padding: 8px 12px;
	border-top: 1px solid #f0f0f1;
}
.wi-agent-settings-field:first-child {
	border-top: 0;
}
.wi-agent-settings-field__row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.wi-agent-settings-field__label {
	flex: 1 1 auto;
	font-size: 13px;
	line-height: 1.4;
	color: #2c3338;
}
.wi-agent-settings-field--locked .wi-agent-settings-field__label {
	color: #787c82;
}
.wi-agent-settings-field__value {
	flex: 0 0 auto;
	font-size: 12px;
	color: #50575e;
	white-space: nowrap;
}
.wi-agent-settings-none {
	color: #8c8f94;
	font-style: italic;
}
.wi-agent-settings-on {
	color: #008a20;
	font-weight: 600;
}
.wi-agent-settings-off {
	color: #b32d2e;
	font-weight: 600;
}
.wi-agent-settings-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	vertical-align: -2px;
	margin-right: 4px;
}
.wi-agent-settings-field__goto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 14px;
	color: #787c82;
	text-decoration: none;
	border-radius: 4px;
}
.wi-agent-settings-field__goto:hover {
	color: #2271b1;
	background: #f0f6fc;
}
.wi-agent-settings-field__hint {
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.4;
	color: #8c8f94;
	font-style: italic;
}

/* ===========================================================================
   Agent rail (Dashboard-Onboarding Paket 2, Tobias 2026-09-07): quiet support
   modules at the top and bottom of the right facts column on the STANDALONE
   agent page (admin.php?page=webinarignition_agent without wi_embed=1). The
   embedded editor agent (body.wi-agent-admin-embed) never renders these nodes;
   the scope below is a second guard, not the mechanism.
   =========================================================================== */
body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 1 auto;
	min-height: 0;
	max-height: 46%;
	overflow-y: auto;
	padding: 12px 12px 0;
	box-sizing: border-box;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card {
	padding: 12px 13px 11px;
	border-radius: 8px;
	box-sizing: border-box;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card--optin {
	border: 1px solid #f0c2b0;
	background: linear-gradient(180deg, #fff8f5 0%, #ffffff 100%);
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card--whatsnew {
	border: 1px solid #e2e4e7;
	background: #fff;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--wi-color-primary, #e64f1d);
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card--whatsnew .wi-agent-rail-card__title {
	font-size: 13px;
	color: #1d2327;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #1d2327;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__text {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.5;
	color: #50575e;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__text strong {
	color: #2c3338;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__actions {
	margin: 0;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__btn {
	display: inline-block;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	color: #1d2327;
	font-size: 12px;
	line-height: 1.9;
	padding: 0 12px;
	cursor: pointer;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__btn:hover {
	background: #f6f7f7;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__cta {
	display: inline-block;
	border: 1px solid var(--wi-color-primary, #e64f1d);
	border-radius: 4px;
	background: var(--wi-color-primary, #e64f1d);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 2;
	padding: 0 14px;
	text-decoration: none;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__cta:hover,
body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__cta:focus {
	background: #c94318;
	border-color: #c94318;
	color: #fff;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__later {
	margin: 8px 0 0;
	font-size: 12px;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__later a {
	color: #50575e;
	text-decoration: underline;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__list {
	margin: 0 0 10px;
	padding-left: 1.15em;
	font-size: 12px;
	line-height: 1.5;
	color: #2c3338;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__link {
	color: #2271b1;
	text-decoration: none;
	font-size: 12px;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__link:hover {
	text-decoration: underline;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__dismiss {
	color: #787c82;
	text-decoration: underline;
	font-size: 12px;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-links {
	flex: 0 0 auto;
	padding: 9px 14px 10px;
	border-top: 1px solid #ececed;
	background: #fafafa;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-links__row {
	margin: 0 0 4px;
	font-size: 11px;
	line-height: 1.55;
	color: #646970;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-links__row:last-child {
	margin-bottom: 0;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-links a {
	color: #2271b1;
	text-decoration: none;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-links a:hover,
body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-links a:focus {
	text-decoration: underline;
}

/* "Live on Thursday" rail card (2026-09-08): two stacked demo buttons (German + English) and a
   small on-demand link beneath, in the same orange/white/black language as the other rail cards. */
body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card--live {
	border: 1px solid #f0c2b0;
	background: linear-gradient(180deg, #fff8f5 0%, #ffffff 100%);
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__actions--stack {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card--live .wi-agent-rail-card__cta {
	text-align: center;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__demo {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.5;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__demo a {
	color: #50575e;
	text-decoration: underline;
}

body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__demo a:hover,
body.wi-agent-admin-page:not(.wi-agent-admin-embed) .wi-agent-rail-card__demo a:focus {
	color: #c94318;
}

/* #Create-Seite = KI-Agent (Tobias 2026-09-08): Kopfzeilen-Styles der Standalone-Agent-Seite
   stehen INLINE in inc/wi-agent-rest.php (wp-admin wird nie gecacht) — hier bewusst keine
   Duplikat-Regeln, damit es nur eine Quelle gibt. */