/* ==========================================================================
   Nachrichten: „Neue Nachricht" mit Empfängersuche (Marc, 03.10.2026, Punkt 6)

   Gehört zu Inklusio_Empfaenger (Knopf und Dialog auf der Gesprächsübersicht)
   und plugin/inklusio-core/assets/empfaenger.js. Farben nur über die
   --ink-*-Token. Text mindestens 4,5:1 (graphite-500 auf Weiss 6,7:1,
   graphite-600 9,5:1, mint-700 6,3:1, status-red 4,7:1); Fokusring und die
   Markierung der aktiven Option in mint-600 (4,2:1, Grafik ≥ 3:1). Weisse
   Knopfschrift auf farbigen Knöpfen bleibt (Marc), die Knöpfe kommen aus
   inklusio.css (.ink-btn).

   Lädt nach components.css und vor mobil.css (functions.php); die Regeln
   für das Handy stehen unten in @media (max-width: 47.99em).
   ========================================================================== */

.ink-neue-nachricht {
	margin: 0 0 var(--ink-space-4);
}

.ink-neue-nachricht__ohne-skript {
	margin: 0;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
}

/* Das Fenster über der Seite – wie das Meldefenster, nur per Skript statt :target. */
.ink-neue-nachricht__fenster {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: var(--ink-space-4);
	overflow-y: auto;
}

.ink-neue-nachricht__fenster[hidden] {
	display: none;
}

/* hidden gegen eigenes display (Prüferfund 03.10.2026): Der Knopf (.ink-btn,
   inline-flex), die Empfängerwahl und das Nachrichtenfeld (flex) sowie die
   Zeile „Ausgewählt" tragen Autorenregeln mit display – die schlagen die
   Browser-Vorgabe [hidden] { display: none }, und das Theme hat keine
   globale Regel dafür. Ohne diese Zeilen stand der Knopf ohne Skript
   sichtbar neben dem noscript-Hinweis, und bei leerer Vorschlagsliste
   blieben Feld „An", Textfeld und „Senden" neben dem Leer-Hinweis stehen
   (empfaenger.js setzt dort hidden). Wie teilen.css es für den
   Teilen-Knopf tut. */
.ink-neue-nachricht__knopf[hidden],
.ink-neue-nachricht__aktionen .ink-btn[hidden],
.ink-empfaengerwahl[hidden],
.ink-empfaengerwahl__gewaehlt[hidden],
.ink-neue-nachricht__feld[hidden],
.ink-neue-nachricht__leer[hidden] {
	display: none;
}

.ink-neue-nachricht__grund {
	position: absolute;
	inset: 0;
	background: rgba(23, 27, 33, 0.55);
}

/* Solange das Fenster offen ist, rollt die Seite dahinter nicht. */
html.ink-neue-nachricht-offen {
	overflow: hidden;
}

.ink-neue-nachricht__tafel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ink-space-3);
	width: min(100%, 520px);
	max-height: calc(100vh - 2 * var(--ink-space-4));
	padding: clamp(1.5rem, 4vw, 2.25rem);
	overflow-y: auto;
	background: var(--ink-bg-elevated);
	border-top: 4px solid var(--ink-mint-500);
	border-radius: var(--ink-radius-xl);
	box-shadow: var(--ink-shadow-lg);
}

.ink-neue-nachricht__titel {
	margin: 0;
	font-size: var(--ink-text-xl);
}

.ink-neue-nachricht__hinweis,
.ink-neue-nachricht__leer {
	margin: 0;
	font-size: var(--ink-text-sm);
	line-height: 1.5;
	color: var(--ink-graphite-500);
}

.ink-neue-nachricht__hinweis:empty {
	display: none;
}

.ink-neue-nachricht__leer {
	padding: 0.75rem 1rem;
	color: var(--ink-graphite-600);
	background: var(--ink-sand-100);
	border-radius: var(--ink-radius-sm);
}

/* Felder: dieselbe Beschriftung wie die Werkzeugleisten (components.css). */
.ink-neue-nachricht__feld,
.ink-empfaengerwahl {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.ink-neue-nachricht__feld span,
.ink-empfaengerwahl__name {
	font-size: var(--ink-text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-graphite-500);
}

.ink-neue-nachricht__feld textarea,
.ink-empfaengerwahl__eingabe {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.6rem 0.75rem;
	font: inherit;
	font-size: var(--ink-text-base);
	color: var(--ink-text);
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border);
	border-radius: var(--ink-radius-sm);
}

.ink-neue-nachricht__feld textarea {
	min-height: 6.5rem;
	line-height: 1.5;
	resize: vertical;
}

.ink-neue-nachricht__feld textarea:focus-visible,
.ink-empfaengerwahl__eingabe:focus-visible {
	outline: 2px solid var(--ink-mint-600);
	outline-offset: 1px;
	border-color: var(--ink-mint-500);
}

/* Die Eingabe mit Vorschlägen (WAI-ARIA Combobox): Die Liste liegt über dem
   Nachrichtenfeld, deshalb absolut und mit Schatten. */
.ink-empfaengerwahl {
	position: relative;
}

.ink-empfaengerwahl__liste {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 2;
	max-height: 18rem;
	margin: 0.25rem 0 0;
	padding: 0.25rem;
	overflow-y: auto;
	list-style: none;
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border);
	border-radius: var(--ink-radius-sm);
	box-shadow: var(--ink-shadow-md);
}

.ink-empfaengerwahl__liste[hidden] {
	display: none;
}

/* Jede Option mindestens 44 Pixel hoch – ein Fingerziel, auch am Desktop. */
.ink-empfaengerwahl__option {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 0.6rem;
	min-height: 2.75rem;
	padding: 0.6rem 0.75rem;
	font-size: var(--ink-text-sm);
	color: var(--ink-text);
	border-radius: var(--ink-radius-sm);
	cursor: pointer;
}

.ink-empfaengerwahl__option[aria-selected="true"],
.ink-empfaengerwahl__option:hover {
	background: var(--ink-mint-50);
}

/* Die per Tastatur markierte Option trägt zusätzlich einen Rahmen – Farbe allein reicht nicht. */
.ink-empfaengerwahl__option[aria-selected="true"] {
	box-shadow: inset 0 0 0 2px var(--ink-mint-600);
}

.ink-empfaengerwahl__option-name {
	font-weight: 600;
}

.ink-empfaengerwahl__option-ort {
	color: var(--ink-graphite-500);
}

.ink-empfaengerwahl__option-quelle {
	margin-left: auto;
	font-size: var(--ink-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-graphite-500);
}

.ink-empfaengerwahl__gewaehlt {
	margin: 0;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
}

.ink-empfaengerwahl__gewaehlt b {
	color: var(--ink-text);
}

/* Nur für Vorleseprogramme (Live-Region „3 Vorschläge"). */
.ink-nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ink-neue-nachricht__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ink-space-2);
}

.ink-neue-nachricht__stand {
	margin: 0;
	min-height: 1.2em;
	font-size: var(--ink-text-sm);
	line-height: 1.5;
	color: var(--ink-graphite-600);
}

.ink-neue-nachricht__stand--fehler {
	color: var(--ink-status-red);
}

.ink-neue-nachricht__stand--ok {
	font-weight: 600;
	color: var(--ink-mint-700);
}

/* --------------------------------------------------------------------------
   Handy (bis 767 px): Tafel unten am Rand, Felder mit 16 Pixel Schrift –
   darunter vergrössert Safari auf dem iPhone die Seite bei jedem Antippen –,
   Optionen und Knöpfe als Fingerziele von 44 Pixeln.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
	.ink-neue-nachricht__fenster {
		align-items: end;
		padding: var(--ink-space-2);
	}

	.ink-neue-nachricht__tafel {
		width: 100%;
		max-height: calc(100vh - 2 * var(--ink-space-2));
		padding: 1.25rem 1rem;
		border-radius: var(--ink-radius-lg);
	}

	.ink-empfaengerwahl__eingabe,
	.ink-neue-nachricht__feld textarea,
	.ink-empfaengerwahl__option {
		font-size: 16px;
	}

	.ink-empfaengerwahl__option {
		min-height: 2.75rem;
	}

	.ink-neue-nachricht__aktionen .ink-btn {
		flex: 1 1 10rem;
		min-height: 2.75rem;
	}
}

/* ==========================================================================
   Nachrichten löschen – nur für mich (Marc, 11.10.2026)

   Gehört zu Inklusio_Nachrichtenloeschen und den Teilvorlagen
   hivepress/message/view/inklusio-nachricht-loeschen.php (Gespräch) und
   hivepress/message/thread/inklusio-gespraech-loeschen.php (Übersicht).
   Der Mülleimer ersetzt das HivePress-X, das nur beim Zeigen erschien
   (frontend.min.css: .hp-message__action--delete display:none, :hover
   display:block): immer sichtbar, 44 × 44 px Fingerziel, graphite-500 auf
   dem hellen Nachrichtengrund (#eff5fb bzw. #effaf5: ≥ 6:1), beim Zeigen und
   im Fokus status-red (4,7:1), Fokusring mint-600. Farben nur über Token;
   kein Orange, keine dunkle Schrift auf farbigen Knöpfen (Marc).

   Mit body davor, wo HivePress dieselbe Spezifität hat – die Reihenfolge der
   Stilblätter im Kopf soll nicht entscheiden.
   ========================================================================== */

/* Im Gespräch: rechts oben in der Nachricht (der Behälter ist position:relative, HivePress). */
.hp-message--view-block .ink-nachricht-loeschen {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	margin: 0;
	line-height: 1;
}

.ink-nachricht-loeschen__form,
.ink-gespraech-loeschen__form {
	display: inline-block;
	margin: 0;
}

/* Der Knopf: 44 × 44 px, Symbol mittig. Mit [type="submit"] (0,2,0): JobHive färbt
   jeden Absendeknopf mit button[type=submit] (0,1,1, Verlauf) und der Customizer
   inline mit background-color #FF5C6C – siehe inklusio.css zur Regel für Absendeknöpfe. */
.ink-nachricht-loeschen__knopf[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--ink-graphite-500);
	background: transparent;
	background-image: none;
	border: 0;
	border-radius: var(--ink-radius-sm);
	box-shadow: none;
	cursor: pointer;
	transition: color var(--ink-dur-fast) var(--ink-ease-out),
		background-color var(--ink-dur-fast) var(--ink-ease-out);
}

.ink-nachricht-loeschen__knopf[type="submit"]:hover,
.ink-nachricht-loeschen__knopf[type="submit"]:focus-visible {
	color: var(--ink-status-red);
	background: rgba(211, 58, 63, 0.08);
}

.ink-nachricht-loeschen__knopf[type="submit"]:focus-visible {
	outline: 2px solid var(--ink-mint-600);
	outline-offset: 1px;
}

.ink-nachricht-loeschen__knopf .hp-icon {
	margin: 0;
	font-size: inherit;
}

/* Im Gespräch gut sichtbar (Marc: „im Chat gut sichtbar anstatt des X“): grösser
   und dunkler als in der Übersicht, wo es ein kleines Symbol bleibt (graphite-700
   auf dem Nachrichtengrund > 11:1). Zeigen und Fokus wie oben rot. */
.hp-message--view-block .ink-nachricht-loeschen__knopf[type="submit"] {
	font-size: 1.3rem;
	color: var(--ink-graphite-700);
}

.hp-message--view-block .ink-nachricht-loeschen__knopf[type="submit"]:hover,
.hp-message--view-block .ink-nachricht-loeschen__knopf[type="submit"]:focus-visible {
	color: var(--ink-status-red);
}

/* Platz im Kopf der Nachricht: rechts frei für den Mülleimer. Bei eigenen
   Nachrichten zeichnet HivePress rechts oben den Lesehaken (::after,
   right:1.25rem) – der rückt neben den Mülleimer. */
body .hp-message--view-block .hp-message__header {
	padding-right: 3.25rem;
}

body .hp-message--view-block.hp-message--sent .hp-message__header {
	padding-right: 5.75rem;
}

body .hp-message--view-block.hp-message--sent::after {
	right: 3.5rem;
}

/* Das alte X kommt nicht mehr in den Baum (Inklusio_Nachrichtenloeschen);
   liefert ein Zwischenspeicher es noch, bleibt es unsichtbar – auch beim Zeigen. */
body .hp-message--view-block .hp-message__action--delete,
body .hp-message--view-block:hover .hp-message__action--delete {
	display: none;
}

/* In der Übersicht: eine schmale Zelle rechts vom Datum. */
.hp-messages.hp-table td.ink-gespraech-loeschen {
	width: 3.25rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	text-align: right;
	white-space: nowrap;
}

/* Hivetheme richtet nur die letzte Zelle rechts aus (frontend.min.css:
   .hp-table td:last-child { text-align: right }) – das war das Datum, jetzt
   ist es der Mülleimer. Das Datum bleibt ausdrücklich rechtsbündig, sonst
   stünde es bei width: 100 % der Tabelle linksbündig mitten in der Zeile.
   Auf dem Handy (Karte) setzt components.css es wieder linksbündig (!important). */
.hp-messages.hp-table td.hp-message__sent-date {
	text-align: right;
}

/* Handy (bis 640 px – dieselbe Einheit und Stufe wie die Karten-Zeilen in
   components.css; eine Grenze in em läge bei grösserer Browser-Grundschrift
   höher als die der Karte, und zwischen beiden Grenzen stünde der Mülleimer
   absolut über dem Datum einer noch echten Tabellenzeile):
   Die Zeile ist eine Karte; der Mülleimer sitzt rechts mittig, die Karte
   lässt ihm Platz – nichts ragt über den Rand, keine Überbreite. */
@media (max-width: 640px) {
	.hp-messages.hp-table tr.hp-message--thread-block {
		position: relative;
		padding-right: 3.25rem;
	}

	.hp-messages.hp-table td.ink-gespraech-loeschen {
		position: absolute;
		top: 50%;
		right: 0;
		width: auto;
		padding: 0 !important;
		transform: translateY(-50%);
	}
}