/**
 * HÖMMA Chat – Styles.
 * Alles unter .hoemma-chat gescoped, damit das Theme nicht kollidiert.
 * Signatur: ruhige Petrol-Vertrauensfarbe, warmes Bernstein für Nutzer-Nachrichten,
 * große Schrift und hohe Kontraste für Senior:innen.
 */

.hoemma-chat {
	/* --- Design-Token (bei Bedarf hier rebranden) --- */
	--hoemma-petrol:      #17494d;
	--hoemma-petrol-soft: #e3edec;
	--hoemma-amber:       #f3e2c4;
	--hoemma-amber-line:  #dcc596;
	--hoemma-surface:     #f4f6f4;
	--hoemma-card:        #ffffff;
	--hoemma-ink:         #16242a;
	--hoemma-ink-soft:    #4a5a5e;
	--hoemma-focus:       #1e6e73;
	--hoemma-radius:      18px;

	max-width: 720px;
	margin: 0 auto;
	background: var(--hoemma-card);
	border: 1px solid #e0e6e4;
	border-radius: var(--hoemma-radius);
	box-shadow: 0 10px 30px rgba( 22, 36, 42, 0.08 );
	overflow: hidden;
	color: var(--hoemma-ink);
	font-size: 1.15rem;
	line-height: 1.6;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.hoemma-chat *,
.hoemma-chat *::before,
.hoemma-chat *::after {
	box-sizing: border-box;
}

/* --- Kopfzeile --- */
.hoemma-chat__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: var(--hoemma-petrol);
	color: #fff;
}

.hoemma-chat__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hoemma-chat__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--hoemma-petrol);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
}

.hoemma-chat__name {
	font-size: 1.35rem;
	font-weight: 700;
}

/* --- Nachrichtenbereich --- */
.hoemma-chat__log {
	padding: 1.25rem;
	background: var(--hoemma-surface);
	min-height: 240px;
	max-height: 60vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hoemma-chat__msg {
	display: flex;
	flex-direction: column;
	max-width: 85%;
}

.hoemma-chat__msg--user {
	align-self: flex-end;
	align-items: flex-end;
}

.hoemma-chat__msg--bot {
	align-self: flex-start;
	align-items: flex-start;
}

.hoemma-chat__speaker {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--hoemma-ink-soft);
	margin: 0 0.35rem 0.25rem;
}

.hoemma-chat__bubble {
	padding: 0.85rem 1.1rem;
	border-radius: 16px;
	font-size: 1.2rem;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
}

.hoemma-chat__msg--bot .hoemma-chat__bubble {
	background: var(--hoemma-petrol-soft);
	color: var(--hoemma-ink);
	border-bottom-left-radius: 4px;
}

.hoemma-chat__msg--user .hoemma-chat__bubble {
	background: var(--hoemma-amber);
	color: var(--hoemma-ink);
	border: 1px solid var(--hoemma-amber-line);
	border-bottom-right-radius: 4px;
}

/* --- „HÖMMA denkt nach …“ --- */
.hoemma-chat__typing {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.hoemma-chat__typing span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--hoemma-petrol);
	opacity: 0.35;
	animation: hoemma-bounce 1.2s infinite ease-in-out;
}

.hoemma-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.hoemma-chat__typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes hoemma-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
	40%           { transform: translateY(-5px); opacity: 0.9; }
}

/* --- Eingabezeile --- */
.hoemma-chat__inputrow {
	display: flex;
	gap: 0.75rem;
	align-items: flex-end;
	padding: 1rem 1.25rem;
	background: var(--hoemma-card);
	border-top: 1px solid #e6ebe9;
}

.hoemma-chat__input {
	flex: 1;
	resize: none;
	min-height: 56px;
	max-height: 160px;
	padding: 0.85rem 1rem;
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--hoemma-ink);
	border: 2px solid #cdd8d6;
	border-radius: 14px;
	background: #fff;
	font-family: inherit;
}

.hoemma-chat__input::placeholder { color: #8a9a9c; }

.hoemma-chat__send {
	flex: 0 0 auto;
	min-height: 56px;
	min-width: 120px;
	padding: 0 1.5rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
	background: var(--hoemma-petrol);
	border: none;
	border-radius: 14px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.hoemma-chat__send:hover { background: #0f383b; }

.hoemma-chat__send:disabled {
	background: #9fb3b2;
	cursor: default;
}

/* --- Fußzeile --- */
.hoemma-chat__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.25rem 1rem;
	background: var(--hoemma-card);
	font-size: 0.95rem;
	color: var(--hoemma-ink-soft);
}

.hoemma-chat__disclaimer { flex: 1 1 240px; }

.hoemma-chat__privacy {
	color: var(--hoemma-focus);
	font-weight: 600;
	text-decoration: underline;
}

/* --- Fokus sichtbar (Barrierefreiheit) --- */
.hoemma-chat :focus-visible {
	outline: 3px solid var(--hoemma-focus);
	outline-offset: 2px;
}

/* --- Nur für Screenreader --- */
.hoemma-chat__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Mobil --- */
@media ( max-width: 600px ) {
	.hoemma-chat { border-radius: 12px; font-size: 1.1rem; }
	.hoemma-chat__inputrow { flex-direction: column; align-items: stretch; }
	.hoemma-chat__send { width: 100%; }
	.hoemma-chat__msg { max-width: 100%; }
}

/* --- Reduzierte Bewegung respektieren --- */
@media ( prefers-reduced-motion: reduce ) {
	.hoemma-chat__typing span { animation: none; opacity: 0.6; }
	.hoemma-chat__send { transition: none; }
}