/*
 * HAC – Chatbot an die Marke anpassen (geladen von mu-plugins/hac-chatbot.php)
 *
 * Das Plugin laedt sein widget.css erst nach dem Seitenaufbau und haengt es hinten
 * an. Deshalb beginnen die Regeln hier mit „html body" und dem Attribut [data-skin],
 * sonst gewinnt bei gleicher Spezifitaet das Plugin.
 *
 * Farben je Bereich (Gruen fuer den Hof, Blau fuer Elektro Laimer) kommen aus
 * hac-chatbot.php und landen als --rh-wine / --bd-chat-accent / --bd-chat-text am Chat.
 * Hier steht nur, was fuer beide Bereiche gleich ist.
 */

/* ── Schrift und Form ─────────────────────────────────────────────────── */
html body #rh-chat-root {
	--font-base: "Trebuchet MS", Helvetica, sans-serif;
	--font-body: "Trebuchet MS", Helvetica, sans-serif;
	--font-heading: "Trebuchet MS", Helvetica, sans-serif;
	--btn-radius: 8px;
	--radius-lg: 8px;
	--hac-chat-fokus: #1d89f6;    /* Akzentblau (--hac-farbe-blau) fuer jeden Fokus */
}
html body #rh-chat-root :where(button, input, textarea) {
	font-family: inherit;
}

/* ── Eingabezeile: Theme-Abstand weg, Feld und Knopf gleich hoch ──────── */
/* Das Theme gibt jedem Textfeld margin-bottom: 30px, dadurch rutschte „Senden" nach unten. */
html body #rh-chat-root[data-skin] .rh-chat-form {
	align-items: stretch;
}
html body #rh-chat-root[data-skin] :is(.rh-chat-form, .rh-chat-email-form) input,
html body #rh-chat-root[data-skin] textarea {
	margin: 0;
	border: 1px solid var(--bd-chat-line, #d0d0d0);
	background: #ffffff;
	box-shadow: none;
	text-overflow: ellipsis;
}
html body #rh-chat-root[data-skin] .rh-chat-form input,
html body #rh-chat-root[data-skin] .rh-chat-form button {
	height: 44px;
	min-height: 44px;
	margin: 0;
}
html body #rh-chat-root[data-skin] .rh-chat-form button {
	flex: none;
	line-height: 1;
}
html body #rh-chat-root[data-skin] .rh-chat-form input::placeholder {
	color: #6b6b6b;   /* --hac-farbe-text-leise, 5,3:1 */
	opacity: 1;
}

/* ── Fokus: ein einziger Rahmen in Akzentblau ─────────────────────────── */
/* Vorher: dunkler 3-px-Rahmen des Plugins plus lila Rahmen (#382673). Das Lila setzt
   „Ultimate Addons for Contact Form 7" mit !important auf jedes Textfeld der Seite,
   deshalb hier ebenfalls !important. Steht bewusst nach der Eingabezeile. */
html body #rh-chat-root[data-skin] :is(button, a):focus-visible {
	outline: 2px solid var(--hac-chat-fokus);
	outline-offset: 2px;
}
html body #rh-chat-root[data-skin] :is(input, textarea):focus {
	outline: none;
	border-color: var(--hac-chat-fokus) !important;
	box-shadow: 0 0 0 3px rgba(29, 137, 246, .25) !important;
}

/* ── Feinschliff ───────────────────────────────────────────────────────── */
html body #rh-chat-root .rh-chat-invite,
html body #rh-chat-root .rh-chat-invite::before,
html body #rh-chat-root .rh-chat-hide-launcher {
	border-color: var(--bd-chat-line, #d9ddd5);
}
html body #rh-chat-root .rh-chat-launcher:hover .rh-chat-avatar,
html body #rh-chat-root .rh-chat-launcher:focus-visible .rh-chat-avatar {
	box-shadow: 0 7px 28px rgba(0, 0, 0, .25);
}

/* Eigene Nachrichten: Markenflaeche mit weisser Schrift, in der Farbe des Bereichs, in dem
   die Frage gestellt wurde. Elektro im dunklen Blau, weil Fliesstext auf dem hellen Blau nur 3,6:1 haette. */
html body #rh-chat-root[data-skin="warm"] .rh-chat-user {
	background: var(--rh-wine);
	border-color: var(--rh-wine);
	color: #ffffff;
}
html body #rh-chat-root[data-skin="warm"] .rh-chat-user[data-area="elektro"] {
	background: #0363c3;
	border-color: #0363c3;
}

/* ── Handy: nur der runde Knopf ───────────────────────────────────────── */
/* Die Einladungsblase lag dauerhaft über dem Seiteninhalt und verdeckte Überschriften.
   Das × zum Ausblenden ragte rechts aus dem Bildschirm. */
@media (max-width: 600px) {
	html body #rh-chat-root .rh-chat-invite {
		display: none;
	}
	html body #rh-chat-root .rh-chat-hide-launcher {
		right: -6px;
		top: -14px;
		width: 36px;
		height: 36px;
		font-size: 20px;
	}
}

/* Bestaetigung „Rueckmeldung gespeichert“ direkt unter dem Knopf, leer unsichtbar. */
#rh-chat-root .rh-chat-end .rh-chat-feedback-status { margin: 0; }
#rh-chat-root .rh-chat-end .rh-chat-feedback-status:empty { display: none; }