/**
 * Datei: /wp-content/plugins/mietp-core/inc/modules/messages/css/messages-dashboard.messages.css
 * Modul: Messages (Nachrichten)
 * Autor: MARKS MEDIA
 *
 * Zweck:
 * - Message-Content-Details fuer den Messenger im Benutzer-Dashboard
 * - Bubbles, Attachments, Compose-Row, Upload-Previews
 * - Keine Layout-Struktur (die liegt in messages-dashboard.layout.css)
 *
 * Refactor:
 * - Tokens statt Hex/rgba
 * - Inputs/Felder nutzen field-* Tokens aus style.css (sichtbare Feldflaeche im Light-Mode)
 * - Fokus sichtbar ueber focus-ring (kein Outline-Wildwuchs)
 * - Buttons: keine neuen globalen Button-Designs, nur modulbezogene UI-Elemente
 * - Keine ID-Kollision: Compose im Dashboard = #mp-messages-compose
 */

/* ============================================================
   1. MESSAGE BUBBLES
============================================================ */

.mp-thread-message{
	display:flex;
	flex-direction:column;
	gap:6px;
	margin:0 0 10px;
}

.mp-thread-message.self{
	align-items:flex-end;
}

.mp-thread-message.other{
	align-items:flex-start;
}

.mp-thread-bubble{
	max-width:75%;
	padding:10px 12px;
	border-radius:14px;
	line-height:1.35;
	font-size:14px;
	white-space:pre-wrap;
	word-break:break-word;

	background:var(--bg-surface);
	color:var(--text-main);
	border:1px solid var(--border-hairline);
	box-shadow:var(--shadow-xs);
}

.mp-thread-message.self .mp-thread-bubble{
	background:color-mix(in srgb, var(--brand-primary) 12%, var(--bg-surface));
	border-color:color-mix(in srgb, var(--brand-primary) 25%, var(--border-main));
}

.mp-thread-meta{
	font-size:12px;
	color:var(--text-muted);
}

/* ============================================================
   2. ATTACHMENTS
============================================================ */

.mp-thread-attachments{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:4px;
}

.mp-thread-attachment{
	border:1px solid var(--border-hairline);
	border-radius:10px;
	overflow:hidden;
	background:var(--surface-0);
	box-shadow:var(--shadow-xs);
}

.mp-thread-attachment a{
	display:flex;
	align-items:center;
	gap:8px;
	padding:8px 10px;
	text-decoration:none;
	color:var(--text-main);
}

.mp-thread-attachment img{
	display:block;
	width:120px;
	height:90px;
	object-fit:cover;
}

.mp-thread-attachment i{
	font-size:18px;
	color:var(--brand-primary);
}

/* ============================================================
   3. COMPOSE (TEXT + SEND + ATTACH)
============================================================ */

/* Compose-Container im Dashboard heißt #mp-messages-compose (Fix: keine ID-Kollision) */
#mp-messages #mp-messages-compose{
	display:block; /* mp-compose-row steuert Layout */
	padding:10px 12px;
	padding-left:6px; /* weniger Abstand links */
}

#mp-messages .mp-compose-row{
	display:flex;
	gap:10px;
	align-items:flex-end;
}

/* Attach-Button: wie Feld (sichtbare Flaeche + Hairline) */
#mp-messages .mp-compose-attach{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:44px;
	height:44px;

	border-radius:12px;

	background:var(--field-bg);
	border:1px solid var(--field-border-soft);

	cursor:pointer;
	transition:box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

#mp-messages .mp-compose-attach:hover{
	box-shadow:var(--shadow-xs);
	filter:brightness(0.98);
}

#mp-messages .mp-compose-attach:focus-visible{
	outline:none;
	border-color:var(--brand-primary);
	box-shadow:0 0 0 3px var(--focus-ring);
}

/* Textarea im Messenger: MUSS im Light-Mode eine sichtbare Feldflaeche haben */
#mp-messages #mp-message-text{
	flex:1;
	min-height:44px;
	max-height:120px;
	resize:vertical;

	padding:10px 12px;
	border-radius:12px;

	border:1px solid var(--field-border-soft);
	background:var(--field-bg);
	color:var(--field-color);

	outline:none;

	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		background 0.15s ease;
}

#mp-messages #mp-message-text:hover{
	border-color:var(--field-border-hover);
}

#mp-messages #mp-message-text:focus-visible{
	outline:none;
	border-color:var(--brand-primary);
	box-shadow:0 0 0 3px var(--focus-ring);
}

/* Send-Button bleibt modulbezogen (Icon-Button), aber tokenbasiert */
#mp-messages .mp-compose-send{
	width:44px;
	height:44px;

	border-radius:12px;
	border:1px solid color-mix(in srgb, var(--brand-primary) 55%, transparent);
	background:var(--brand-primary);
	color:var(--text-invert);

	cursor:pointer;
	transition:filter 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

#mp-messages .mp-compose-send:hover{
	filter:brightness(0.95);
	box-shadow:var(--shadow-xs);
}

#mp-messages .mp-compose-send:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px var(--focus-ring);
}

/* ============================================================
   4. UPLOAD PREVIEWS
============================================================ */

.mp-upload-previews{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:10px 0 0;
}

.mp-upload-preview{
	display:flex;
	align-items:center;
	gap:10px;

	padding:8px 10px;
	border-radius:12px;

	background:var(--bg-surface);
	border:1px solid var(--border-hairline);
}

.mp-upload-thumb{
	width:44px;
	height:44px;
	border-radius:10px;
	overflow:hidden;

	background:var(--field-bg);
	border:1px solid var(--field-border-soft);

	display:flex;
	align-items:center;
	justify-content:center;
}

.mp-upload-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.mp-upload-meta{
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:2px;
}

.mp-upload-name{
	font-size:13px;
	font-weight:600;
	color:var(--text-main);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.mp-upload-size{
	font-size:12px;
	color:var(--text-muted);
}

.mp-upload-remove{
	width:34px;
	height:34px;
	border-radius:10px;

	border:1px solid var(--field-border-soft);
	background:var(--field-bg);
	cursor:pointer;

	display:flex;
	align-items:center;
	justify-content:center;

	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		filter 0.15s ease,
		background 0.15s ease;
}

.mp-upload-remove:hover{
	filter:brightness(0.98);
	box-shadow:var(--shadow-xs);
	border-color:var(--field-border-hover);
}

.mp-upload-remove:focus-visible{
	outline:none;
	border-color:var(--brand-primary);
	box-shadow:0 0 0 3px var(--focus-ring);
}