/*
 * Frontend Edit Agent (P136 · W3-W6) — host-only floating edit prompt.
 *
 * These rules only ever ship to logged-in admins (the stylesheet is enqueued behind the
 * wi_host_task_bar gate), so a participant never receives or renders any of this. The root
 * is printed with a `hidden` attribute and stays hidden until the script unhides it.
 */

#wi-fea-root {
	--wi-fea-brand: #1a7f37;
	--wi-fea-brand-dark: #15692e;
	--wi-fea-ink: #1d2327;
	--wi-fea-muted: #646970;
	--wi-fea-line: #dcdcde;
	--wi-fea-panel-bg: #ffffff;
}

/*
 * hidden muss IMMER gewinnen — auch in wp-admin, wo unsere Author-Rules (display:flex auf
 * .wi-fea-fab/.wi-fea-panel) sonst die UA-Regel [hidden]{display:none} ueberstimmen und Panel +
 * FAB gleichzeitig sichtbar waeren. Im Frontend liefert das Theme das meist zufaellig, im
 * Admin nicht. Skopiert auf die Widget-Wurzel, damit nichts anderes auf der Seite betroffen ist.
 */
#wi-fea-root[hidden],
#wi-fea-root [hidden] {
	display: none !important;
}

#wi-fea-fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: var( --wi-z-fab, 999910 );
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background-color: var( --wi-fea-brand );
	color: #ffffff;
	font-size: 24px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.22 );
	transition: background-color 0.15s ease, transform 0.15s ease;
}

#wi-fea-fab:hover {
	background-color: var( --wi-fea-brand-dark );
	transform: translateY( -1px );
}

#wi-fea-panel {
	position: fixed;
	right: 20px;
	bottom: 84px;
	z-index: var( --wi-z-panel, 999920 );
	width: min( 380px, calc( 100vw - 32px ) );
	max-height: min( 560px, calc( 100vh - 120px ) );
	display: flex;
	flex-direction: column;
	background: var( --wi-fea-panel-bg );
	border: 1px solid var( --wi-fea-line );
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.28 );
	overflow: hidden;
	color: var( --wi-fea-ink );
	font-size: 14px;
	transition: opacity 0.35s ease;
}

/* #hunderedms (Tobias 2026-09-17): im 100ms-Raum sitzt unten im iframe die Video-Steuerleiste
   (Settings/Verlassen). Der FAB klebte auf der Viewport-Unterkante und lag ihr auf den Knoepfen.
   Nur dort ruecken FAB + Panel hoch — gerechnet an der gemessenen Geometrie: die iframe-Unterkante
   liegt 51px ueber dem Viewport-Boden, die Leiste sitzt an dieser Kante (72–80px hoch) -> FAB
   bottom = 51 + 80 + 5px Luft = 136, das Panel bleibt dieselben 12px + 52px FAB darueber
   (136 + 64 = 200). Weil das Panel durch den hoeheren Stand 76px Hoehe verliert, bekommt es im
   Raum denselben 36px Luft zur Oberkante wie ausserhalb (max-height = 100vh - 200 - 36), damit
   der Kopf auf niedrigen Viewports nicht oben abschneidet. Die Basis-Regeln oben bleiben
   unveraendert, damit Anmeldeseite, Danke-Seite, Konsole und wp-admin (ohne #wi-hms-root) exakt
   dasselbe Bild behalten. :has() ist im Plugin bereits im Einsatz (webinar-modern.css, wi-agent-*.css). */
/* Tobias 2026-09-17 (abends): der FAB stoerte im Raum das Schliessen-Icon der Sidebar. Deshalb
   liegen beide Raum-Staende 38px (~1 cm) hoeher als in der ersten Runde gerechnet (136 -> 174,
   200 -> 238); die 12px/64px-Abstaende zwischen FAB und Panel bleiben, und der Kopf-Luftraum des
   Panels bleibt dieselben 36px (max-height = 100vh - 274). */
body:has(#wi-hms-root) #wi-fea-fab {
	bottom: 212px;
}

body:has(#wi-hms-root) #wi-fea-panel {
	bottom: 276px;
	max-height: min( 560px, calc( 100vh - 312px ) );
}

/* Ist die Sidebar eingeklappt, sitzt ihr Griff am rechten Video-Rand (.showOnVideo, right:10px) und
   laeuft dem FAB in die Quere, sobald beide Hoehen sich treffen (gemessen 1440x700: 33px Ueber-
   deckung, 1280x720: 21px). Dann weicht der FAB nach links aus — der Griff bleibt frei, und der
   Bereich rechts vom Video ist in diesem Zustand ohnehin frei. Ein fester bottom-Wert kann das
   nicht loesen: der Griff sitzt auf ~0,4*vh und wandert mit jedem Fenster. */
body:has( .sidebar-toggle-container.showOnVideo ) #wi-fea-fab {
	right: 76px;
}

body:has( .sidebar-toggle-container.showOnVideo ) #wi-fea-panel {
	right: 76px;
}

/* A (Tobias 2026-09-06): Peek-through — Maus verlässt das FEA → Panel durchscheinend,
   damit die Seite dahinter sichtbar bleibt, ohne den Chat zu schließen. Hover holt es voll
   zurück (die Klasse wird per JS nur gesetzt, wenn der Host nicht gerade tippt). */
#wi-fea-root.wi-fea-peek #wi-fea-panel {
	opacity: 0.22;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.18 );
}

/* C (Tobias 2026-09-06): Change-Ring — die geänderte Stelle auf der Seite wird nach dem
   Reload kurz grün umrandet und blendet sich selbst wieder aus. */
.wi-fea-ring {
	outline: 3px solid var( --wi-fea-brand );
	outline-offset: 3px;
	border-radius: 3px;
	animation: wi-fea-ring-fade 4.5s ease forwards;
}
@keyframes wi-fea-ring-fade {
	0% { outline-color: var( --wi-fea-brand ); }
	70% { outline-color: var( --wi-fea-brand ); }
	100% { outline-color: transparent; }
}


.wi-fea-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid var( --wi-fea-line );
	background: #f6f7f7;
}

.wi-fea-head-title {
	font-weight: 700;
}

.wi-fea-studio {
	margin-left: auto;
	margin-right: 10px;
	font-size: 12px;
	font-weight: 600;
	color: #2271b1;
	text-decoration: none;
	white-space: nowrap;
}

.wi-fea-studio:hover {
	text-decoration: underline;
}

.wi-fea-close {
	border: none;
	background: none;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: var( --wi-fea-muted );
	padding: 0 2px;
}

.wi-fea-thread {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wi-fea-msg {
	max-width: 92%;
	padding: 9px 12px;
	border-radius: 12px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.wi-fea-msg--user {
	align-self: flex-end;
	background: var( --wi-fea-brand );
	color: #ffffff;
}

.wi-fea-msg--agent {
	align-self: flex-start;
	background: #f0f0f1;
	color: var( --wi-fea-ink );
}

.wi-fea-msg--error {
	align-self: flex-start;
	background: #fcf0f1;
	color: #8a2424;
}

.wi-fea-msg--ok {
	align-self: flex-start;
	background: #eef6ee;
	color: #2a6b2a;
}

/* #Bullets (2026-09-03): Assistenten-Listen ("- …"-Zeilen) als echte Bullet Points. Das
   <ul> sitzt innerhalb der Nachricht; die Disc-Marker stammen aus list-style: disc. */
.wi-fea-msg ul.wi-fea-bullets {
	margin: 2px 0 4px;
	padding: 0 0 0 20px;
	list-style: disc;
	white-space: normal;
	word-wrap: break-word;
}
.wi-fea-msg ul.wi-fea-bullets li {
	margin: 0 0 3px;
	white-space: normal;
}
.wi-fea-msg ul.wi-fea-bullets li:last-child {
	margin-bottom: 0;
}

/* #hardreload (2026-09-03): der Host laedt selbst neu (Cache-Bust), statt dass ein blinder
   location.reload() die alte Fassung aus Breeze/nginx/bfcache zurueckbringt. Der Button sitzt
   innerhalb der Erfolgszeile und ist bewusst klein + sekundaer. */
.wi-fea-hardreload {
	display: block;
	margin-top: 8px;
	border: 1px solid var( --wi-fea-line );
	background: #ffffff;
	color: var( --wi-fea-ink );
	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-fea-hardreload:hover {
	background-color: #f0f0f1;
}

/* #backoffice (2026-09-04): Aktionszeile unter einer Agent-Antwort im Backend-Editor —
   [Vorschau] der aktiven Seite + [Neu laden] nach einer echten Aenderung. */
.wi-fea-resultbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.wi-fea-result {
	border: 1px solid var( --wi-fea-line );
	background: #ffffff;
	color: var( --wi-fea-ink );
	cursor: pointer;
	border-radius: 8px;
	padding: 6px 12px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.wi-fea-result:hover {
	background-color: #f0f0f1;
}
.wi-fea-result--reload {
	border-color: var( --wi-fea-brand );
	color: var( --wi-fea-brand-dark );
}
.wi-fea-result--reload:hover {
	background-color: #eef6ee;
}
/* #studio-link (Tobias 2026-09-12): der Studio-Link ist ein <a> in derselben Aktionszeile —
   dieselbe Knopf-Optik wie [Vorschau]/[Neu laden], nur ohne Link-Unterstreichung. */
a.wi-fea-result {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.wi-fea-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-fea-navrow {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px 10px;
	border-top: 1px solid var( --wi-fea-line );
	background: #f6f7f7;
	font-size: 12px;
}

.wi-fea-navlinks {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: center;
}

.wi-fea-nav {
	color: #2271b1;
	text-decoration: none;
	white-space: nowrap;
}

.wi-fea-nav:hover {
	text-decoration: underline;
}

.wi-fea-reset {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: 0;
	border-left: 1px solid var( --wi-fea-line );
	padding: 1px 2px 1px 10px;
	margin-left: auto;
	color: var( --wi-fea-muted );
	font-size: 12px;
	line-height: 1.4;
	cursor: pointer;
}

.wi-fea-reset:hover {
	color: #d63638;
	text-decoration: underline;
}

.wi-fea-reset:disabled {
	opacity: 0.5;
	cursor: default;
}

.wi-fea-reset-icon {
	font-size: 13px;
	line-height: 1;
}

/* #copyable (Tobias 2026-09-13): "Copy chat" neben [Reset]. Gleiche dezente Optik wie Reset,
   ohne dessen roten Hover; die Trennlinie liefert weiterhin .wi-fea-reset (border-left). */
.wi-fea-copy {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: 0;
	padding: 1px 2px;
	color: var( --wi-fea-muted );
	font-size: 12px;
	line-height: 1.4;
	cursor: pointer;
}

.wi-fea-copy:hover {
	color: #2271b1;
	text-decoration: underline;
}

.wi-fea-copy-icon {
	font-size: 13px;
	line-height: 1;
}

.wi-fea-quote {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 14px 8px;
	padding: 8px 10px;
	border-left: 3px solid var( --wi-fea-brand );
	background: #f6f7f7;
	border-radius: 6px;
	font-size: 12.5px;
	color: var( --wi-fea-muted );
}

.wi-fea-quote-text {
	flex: 1 1 auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.wi-fea-quote-clear {
	border: none;
	background: none;
	cursor: pointer;
	color: var( --wi-fea-muted );
	font-size: 16px;
	line-height: 1;
	padding: 0;
}

.wi-fea-composer {
	border-top: 1px solid var( --wi-fea-line );
	padding: 10px 12px 12px;
	background: #f6f7f7;
}

/* #savedirty (Tobias 2026-09-14): offene, ungespeicherte Aenderungen im wp-admin-Editor — der
   Mini bietet das Speichern direkt im Chat an. Nur sichtbar, solange es wirklich etwas zu
   speichern gibt (JS setzt/loescht das hidden-Attribut); sitzt ueber dem Eingabefeld. */
.wi-fea-savedirty {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 8px;
	padding: 7px 10px;
	border: 1px solid #e0b100;
	border-radius: 7px;
	background: #fcf9e8;
	color: #6b5300;
	font-size: 12.5px;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.wi-fea-savedirty:hover {
	background: #f8f0c8;
}

.wi-fea-savedirty--saving {
	opacity: 0.7;
	cursor: default;
}

.wi-fea-savedirty--done {
	border-color: #5fa426;
	background: #eef7e7;
	color: #2f6b12;
}

.wi-fea-savedirty--failed {
	border-color: #d63638;
	background: #fcecec;
	color: #8a1f21;
}

.wi-fea-savedirty-icon {
	font-size: 13px;
	line-height: 1;
}

.wi-fea-input {
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	min-height: 46px;
	max-height: 180px;
	padding: 9px 11px;
	border: 1px solid var( --wi-fea-line );
	border-radius: 8px;
	font: inherit;
	color: var( --wi-fea-ink );
	background: #ffffff;
}

.wi-fea-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.wi-fea-mic {
	flex: 0 0 auto;
	border: 1px solid var( --wi-fea-line );
	background: #ffffff;
	cursor: pointer;
	border-radius: 8px;
	width: 40px;
	height: 40px;
	font-size: 18px;
	color: var( --wi-fea-ink );
}

.wi-fea-mic.is-recording {
	background: #d63638;
	color: #ffffff;
	border-color: #d63638;
}

/* Sprachwahl (Tobias 2026-09-14): Mikrofon-Knopf + kleiner Pfeil, darunter das Sprachenmenue.
   Gleiche Idee wie im Studio, damit der Host die Sprechsprache selbst waehlt und nichts im
   Browser nachgerechnet werden muss. */
.wi-fea-mic-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.wi-fea-mic-wrap .wi-fea-mic {
	border-radius: 8px 0 0 8px;
}

.wi-fea-mic__caret {
	border: 1px solid var( --wi-fea-line );
	border-left: none;
	background: #ffffff;
	cursor: pointer;
	border-radius: 0 8px 8px 0;
	width: 18px;
	height: 40px;
	padding: 0;
	font-size: 10px;
	line-height: 1;
	color: var( --wi-fea-muted );
}

.wi-fea-mic-menu {
	position: absolute;
	left: 0;
	bottom: calc( 100% + 6px );
	z-index: 20;
	min-width: 210px;
	max-height: 260px;
	overflow-y: auto;
	padding: 4px;
	background: #ffffff;
	border: 1px solid var( --wi-fea-line );
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.14 );
}

.wi-fea-mic-menu[hidden] {
	display: none;
}

.wi-fea-mic-menu__lang {
	display: block;
	width: 100%;
	text-align: left;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 6px;
	padding: 7px 9px;
	font: inherit;
	font-size: 13px;
	color: var( --wi-fea-ink );
	white-space: nowrap;
}

.wi-fea-mic-menu__lang:hover {
	background: rgba( 0, 0, 0, 0.05 );
}

.wi-fea-mic-menu__lang.is-active {
	font-weight: 700;
	background: rgba( 0, 0, 0, 0.06 );
}

.wi-fea-mic-menu__check {
	display: inline-block;
	width: 14px;
}

.wi-fea-mic-menu__lang.is-active .wi-fea-mic-menu__check::before {
	content: '\2713';
}

.wi-fea-send {
	flex: 1 1 auto;
	border: none;
	cursor: pointer;
	border-radius: 8px;
	height: 40px;
	font-weight: 700;
	font-size: 14px;
	background-color: var( --wi-fea-brand );
	color: #ffffff;
	transition: background-color 0.15s ease;
}

.wi-fea-send:hover {
	background-color: var( --wi-fea-brand-dark );
}

.wi-fea-send:disabled {
	opacity: 0.6;
	cursor: default;
}

.wi-fea-stt-note {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.35;
	color: var( --wi-fea-muted );
}

.wi-fea-stt-note[hidden] {
	display: none;
}

/* Pencil icon injected next to shortcode outputs (W5) — admin-only, added by JS. */
.wi-fea-has-pencil {
	position: relative;
}

.wi-fea-pencil {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: var( --wi-z-pencil, 999900 );
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background-color: var( --wi-fea-brand );
	color: #ffffff;
	font-size: 14px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.28 );
	opacity: 0.85;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.wi-fea-pencil:hover {
	opacity: 1;
	transform: translateY( -1px );
}

/* Video pencil one centimetre lower (Tobias 2026-09-17): over the live room the pencil sat
 * flush under the page header and covered the top edge of the room UI. Only the video pencil
 * moves; the date and banner pencils keep their 4px. */
.ctaArea > .wi-fea-pencil {
	top: 42px;
}

/* Quote-in-prompt button (W4) — shown while text is selected. */
#wi-fea-quote-btn {
	position: fixed;
	z-index: var( --wi-z-quote, 999930 );
	border: 1px solid var( --wi-fea-line );
	background: #ffffff;
	color: var( --wi-fea-ink );
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.18 );
}

/* #whole-page (2026-09-08, W4): Text ueber die GANZE Seite markierbar — auch Button-/Link-Text
   ("Platz sichern" & Co.). Manche LP-/Theme-CSS setzen user-select:none auf interaktive Elemente;
   ohne diesen Uebergriff kann der Host genau diese Texte nicht markieren und nicht zitieren.
   body.wi-fea-quotable setzt die JS (Admin-only): Teilnehmer sehen weder die Klasse noch dieses
   Stylesheet — fuer sie bleibt alles beim bisherigen Verhalten. Eigene FEA-UI bleibt unmarkierbar,
   damit das Zitieren nie in der Panel-Bedienung haengen bleibt. */
body.wi-fea-quotable a,
body.wi-fea-quotable button,
body.wi-fea-quotable [role="button"],
body.wi-fea-quotable input[type="submit"],
body.wi-fea-quotable .wp-block-button__link,
body.wi-fea-quotable .btn,
body.wi-fea-quotable .wi-cta,
body.wi-fea-quotable .ctaArea a {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}
body.wi-fea-quotable #wi-fea-root * {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* #copyable (Tobias 2026-09-13): der Host muss den Gespraechsverlauf markieren und kopieren
   koennen wie in jedem KI-Chat. Die Regel darueber nimmt dem GANZEN Panel die Auswahl (damit ein
   Klick auf die Bedienung nicht als Text-Auswahl haengenbleibt); hier geben wir sie den
   Chat-Blasen ausdruecklich zurueck. Bedienelemente bleiben unmarkierbar. Die Auswahl im Panel
   loest bewusst KEIN Zitat aus — captureQuoteSelection() ueberspringt alles innerhalb von
   #wi-fea-root. */
body.wi-fea-quotable #wi-fea-root .wi-fea-msg,
body.wi-fea-quotable #wi-fea-root .wi-fea-msg * {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

/* #flame (2026-09-03): "I'm working on it" row with the WebinarIgnition logo, same look as the
   backend Studio agent. Shown by wi-frontend-edit-agent.js while a chat turn / build applies. */
.wi-fea-thinking {
	display: flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 3px 2px;
	color: var( --wi-fea-muted );
	font-size: 13px;
}

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

.wi-fea-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-fea-flame-glow 1.5s ease-in-out infinite;
}

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

.wi-fea-thinking-label {
	color: var( --wi-fea-muted );
	font-size: 13px;
}

/* Squash and lean, anchored at the base — how a real flame moves. */
@keyframes wi-fea-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-fea-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-fea-flame,
	.wi-fea-flame-wrap::before {
		animation: none;
	}
}

/* #all-devices (2026-09-05, T3): Quote-in-prompt-Button mobil-tapfaehig — mind. 44px
   Trefferflaeche, damit der Tap auf dem Zitat-Button auf Touch-Geraeten zuverlaessig zaehlt.
   Bewusst NACH den Flame-Regeln angehaengt, keine bestehende Regel veraendert. */
#wi-fea-quote-btn {
	min-height: 44px;
	padding: 10px 16px;
	font-size: 14px;
	line-height: 1.2;
	-webkit-tap-highlight-color: transparent;
}

/* #textdraft (2026-09-05): Ergebnis-Box fuer einen KI-Textentwurf (Untertitel/Kuerzung/Neu-
   Generierung). Der generierte Text steht in der Box, der "Übernehmen"-Klick schreibt erst. */
.wi-fea-draft {
	margin-top: 8px;
	padding: 9px 11px;
	border: 1px solid var( --wi-fea-line );
	border-left: 3px solid var( --wi-fea-brand );
	border-radius: 8px;
	background: #ffffff;
}
.wi-fea-draft-text {
	white-space: pre-wrap;
	word-wrap: break-word;
	color: var( --wi-fea-ink );
	line-height: 1.45;
}
.wi-fea-draft .wi-fea-resultbar {
	margin-top: 8px;
}
.wi-fea-result--apply {
	border-color: var( --wi-fea-brand );
	color: var( --wi-fea-brand-dark );
	background: #eef6ee;
}
.wi-fea-result--apply:hover {
	background-color: #e2f0e2;
}

/* Prüfer-Fixrunde (MITTEL-3/MITTEL-4, 2026-09-05): "Rückgängig"-Knopf nach einer Uebernahme +
   Zustand der Draft-Box, nachdem der Text uebernommen wurde (kein Doppel-Klick-Duplikat). */
.wi-fea-result--undo {
	border-color: #b32d2e;
	color: #b32d2e;
}
.wi-fea-result--undo:hover {
	background-color: #fcf0f1;
}
.wi-fea-result:disabled,
.wi-fea-result--apply:disabled {
	opacity: 0.65;
	cursor: default;
}
.wi-fea-result--apply:disabled:hover {
	background-color: #eef6ee;
}
.wi-fea-draft--applied {
	border-left-color: #8ab98a;
}
/* Der Hard-Reload-Knopf steht sonst allein (display:block, margin-top); in einer Aktionszeile
   neben dem Rueckgaengig-Knopf wird daraus ein normales Flex-Item. */
.wi-fea-resultbar .wi-fea-hardreload {
	margin-top: 0;
}

/* Tobias 2026-09-12 (Mail-only Entwurf): Entwurfs-Bubbles fuer neue Bestaetigungs-/Reminder-
   Mailtexte auf dem E-Mails-Tab. Je Mail eine Karte (Slot, Betreff, Ueberschrift, Vorschau,
   Body), EIN [Uebernehmen]-Knopf fuer den ganzen Entwurf. Der Body ist bei langem Text
   scrollbar, damit die Bubble lesbar bleibt. */
.wi-fea-maildraft {
	margin-top: 8px;
	padding: 9px 11px;
	border: 1px solid var( --wi-fea-line );
	border-left: 3px solid var( --wi-fea-brand );
	border-radius: 8px;
	background: #ffffff;
}
.wi-fea-maildraft-head {
	font-weight: 600;
	margin-bottom: 6px;
	color: var( --wi-fea-ink );
}
.wi-fea-maildraft-mail {
	border-top: 1px solid var( --wi-fea-line );
	padding-top: 6px;
	margin-top: 6px;
}
.wi-fea-maildraft-mail:first-of-type {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}
.wi-fea-maildraft-slot {
	font-weight: 600;
	color: var( --wi-fea-brand-dark );
	margin-bottom: 4px;
}
.wi-fea-maildraft-line {
	margin-bottom: 3px;
	line-height: 1.4;
}
.wi-fea-maildraft-label {
	display: inline-block;
	min-width: 84px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	opacity: 0.7;
	vertical-align: top;
}
.wi-fea-maildraft-value {
	white-space: pre-wrap;
	word-wrap: break-word;
	color: var( --wi-fea-ink );
}
.wi-fea-maildraft-body .wi-fea-maildraft-value {
	display: block;
	max-height: 220px;
	overflow-y: auto;
	margin-top: 2px;
	padding: 6px 8px;
	background: #fafafa;
	border-radius: 6px;
}
/* Der Body ist HTML (server-gesichert) und wird als Vorschau gerendert — kein roher Quelltext.
   Hier nur so einhegen, dass die Bubble nicht aufbricht. */
.wi-fea-maildraft-html {
	white-space: normal;
}
.wi-fea-maildraft-html > :first-child {
	margin-top: 0;
}
.wi-fea-maildraft-html > :last-child {
	margin-bottom: 0;
}
.wi-fea-maildraft-html p {
	margin: 0 0 8px;
}
.wi-fea-maildraft-html img {
	max-width: 100%;
	height: auto;
}
.wi-fea-maildraft-html a {
	word-break: break-word;
}
.wi-fea-maildraft-html table {
	max-width: 100%;
}
/* Naechster-Schritt-Chip (Tobias 2026-09-15; Aufraeumen 2026-09-20): der empfohlene naechste
   Schritt (res.next_step) steht im Mini-Agent als EIN hervorgehobener Chip vor den Options
   (renderOptions() in wi-frontend-edit-agent.js). Die Marken-Hervorhebung setzt das JS
   zusaetzlich inline als Fallback; diese Regel haelt den Look im Stylesheet nachvollziehbar
   und gibt dem Chip seine Form (Padding/Radius setzen die Inline-Styles nicht). Markenfarbe
   mit Hex-Fallback wie #wi-fea-root: fehlt --wi-fea-brand, greift #1a7f37. */
.wi-fea-option--next {
	font-weight: 600;
	border: 1px solid var( --wi-fea-brand, #1a7f37 );
	color: var( --wi-fea-brand, #1a7f37 );
	background: #ffffff;
	border-radius: 16px;
	padding: 6px 14px;
	cursor: pointer;
	white-space: normal;
	height: auto;
}