/* DW Gegenwind – Frontend Chat CSS
 * Designsystem aus promt defaults.txt
 * Schriften: Fira Sans Condensed (Headlines), Literata (Subline), Outfit (Copy)
 */

/* ── Custom Properties ───────────────────────────────────────────────────── */

#dwg-wrapper {
	--blau:    #1F5AE2;
	--creme:   #DED7D5;
	--laub:    #bab94d;
	--violett: #c970f0;
	--rosa:    #f470d1;
	--gruen:   #78d797;

	--font-headline: 'Fira Sans Condensed', sans-serif;
	--font-subline:  'Literata', serif;
	--font-copy:     'Outfit', sans-serif;

	--bubble-r:    18px;
	--avatar-size: 100px;
	--max-w:       680px;

	font-family: var(--font-copy);
	color: var(--blau);
	box-sizing: border-box;
}

#dwg-wrapper *,
#dwg-wrapper *::before,
#dwg-wrapper *::after {
	box-sizing: inherit;
}

/* ── Views (SPA-Toggle) ──────────────────────────────────────────────────── */

.dwg-view {
	display: none;
}

.dwg-view--active {
	display: block;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* ÜBERSICHT                                                                  */
/* ══════════════════════════════════════════════════════════════════════════ */

#dwg-overview {
	/*max-width: var(--max-w);*/
	margin: 0 auto;
	padding: 28px 16px 40px;
	padding-top:70px;
}

#dwg-topic-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-bottom: 36px;
}

/* ── Themenkarte ─────────────────────────────────────────────────────────── */

.dwg-topic-card {
	display: flex;
	align-items: center;
	gap: 30px;
	cursor: pointer;
	transition: all 0.18s ease;
	justify-content: center;
}

.dwg-topic-card .dwg-bubble--topic-preview{
	transition: all 0.3s ease;
}

.dwg-topic-card:hover .dwg-bubble--topic-preview{
	/*transform: translateX(5px);*/
	background: #5783e9;
}

/* Avatar (rund) */
.dwg-avatar-wrap {
	flex-shrink: 0;
}

.dwg-avatar {
	width:  var(--avatar-size);
	height: var(--avatar-size);
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.dwg-avatar--placeholder {
	background: var(--laub);
	width:  var(--avatar-size);
	height: var(--avatar-size);
	border-radius: 50%;
}

/* Blase + Badge-Wrapper */
.dwg-topic-card__bubble-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
	max-width: 73%;
}

/* Vorschau-Blase (linke Seite, blau) */
.dwg-bubble--topic-preview {
	background: var(--blau);
	color: #fff;
	border-radius: var(--bubble-r);
	border-bottom-left-radius: 4px;
	padding: 12px 18px;
	font-family: var(--font-copy);
	font-size: 1rem;
	line-height: 1.55;
	max-width: 100% !important;
}

/* Antwort-Anzahl-Badge */
.dwg-badge {
	position: absolute;
	top:   -9px;
	right: -9px;
	background: var(--laub);
	color: #000;
	font-family: var(--font-copy);
	font-size: 2rem;
	font-weight: 700;
	width:  40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
}

/* ── Export-Button ───────────────────────────────────────────────────────── */



#dwg-export-pdf svg {
	width:  16px;
	height: 16px;
	stroke: currentColor;
	flex-shrink: 0;
}


#dwg-export-pdf:disabled,
.dwg-btn-pdf:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}


#dwg-export-pdf {
	display: inline-flex;
	align-items: center;
    border:none !important;
    background-color:var(--var-gruen) !important;
    color:var(--var-blau) !important;
    padding:12px 45px !important;
    border-radius:100px !important;
    font-family: 'Outfit' !important;
    font-weight: bold !important;
    text-transform:uppercase !important;
	float:right;
}


#dwg-export-pdf:hover, #dwg-export-pdf:focus 
{ 
	    background-color:var(--var-blau) !important;
        color:white !important;
}

#dwg-export-pdf:disabled,
.dwg-btn-pdf:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* PDF-Button im Chat-Header (kleinere Variante auf dunklem Hintergrund) */
.dwg-btn-pdf--header {
	background: rgba(255, 255, 255, 0.12) !important;
	color: var(--blau) !important;
	border: none;
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 1.6rem;
	margin-left: auto;
	position: relative;
	z-index: 1;
	float: none;
}

.dwg-btn-pdf--header:hover {
	background: rgba(255, 255, 255, 0.22) !important;
	opacity: 1 !important;
}

.dwg-btn-pdf--header svg {
	width:  14px;
	height: 14px;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* CHATFENSTER                                                                */
/* ══════════════════════════════════════════════════════════════════════════ */

#dwg-chat {
	display: none;
	flex-direction: column;
	/*max-width: var(--max-w);*/
	margin: 0 auto;
	/* Feste Höhe für den Chat-Bereich – passt sich an den Viewport an */
	height: min(680px, 90vh);
	/*border: 1px solid #e0ddd0;*/
	border-radius: 12px;
	overflow: hidden;
	/*box-shadow: 0 4px 24px rgba(2, 30, 80, 0.10);*/
	padding-top:20px;
}

#dwg-chat.dwg-view--active {
	display: flex;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

#dwg-chat-header {
	display: flex;
	align-items: center;
	padding: 0 12px;
	color: #fff;
	min-height: 135px;
	flex-shrink: 0;
	position: relative;
}

/* Zurück-Button */
#dwg-back-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	color: var(--blau);
	font-family: var(--font-copy);
	font-size: 1.6rem;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 6px;
	transition: background 0.15s;
	flex-shrink: 0;
	z-index: 1;
}

#dwg-back-btn:hover {
	background: rgba(255, 255, 255, 0.12);
}

#dwg-back-btn svg {
	width:  18px;
	height: 18px;
}

/* Avatar (zentriert im Header) */
#dwg-chat-avatar-wrap {
	position: absolute;
	top:0;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
}

#dwg-chat-avatar {
	width:  120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--laub);
	/*border: 2px solid rgba(255, 255, 255, 0.25);*/
}

#dwg-chat-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Nachrichten-Bereich ─────────────────────────────────────────────────── */

#dwg-messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/*background: #f5f3ec;*/
	scroll-behavior: smooth;
}

/* Nachrichten-Zeile */
.dwg-msg-row {
	display: flex;
	align-items: flex-end;
	gap: 6px;
}

.dwg-msg-row--left  { justify-content: flex-start; }
.dwg-msg-row--right { justify-content: flex-end; }

/* ── Chat-Blasen ─────────────────────────────────────────────────────────── */

.dwg-bubble {
	max-width: 75%;
	padding: 15px 20px;
	border-radius: var(--bubble-r);
	font-family: var(--font-copy);
	font-size: 2rem;
	line-height: 1.6;
	word-break: break-word;
}

/* Themen-Frage – links, dunkelblau */
.dwg-bubble--topic {
	background: var(--blau);
	color: #fff;
	border-bottom-left-radius: 4px;
}

.dwg-bubble--topic strong { color: #fff; }

/* Vorgefertigte Antwort – rechts, creme */
.dwg-bubble--answer {
	background: var(--creme);
	color: var(--var-blau);
	border-bottom-right-radius: 4px;
}

/* Eigene Benutzereingabe – rechts, etwas dunkler */
.dwg-bubble--user {
	background: #d8d4c0;
	color: var(--var-blau);
	border-bottom-right-radius: 4px;
}

/* Löschen-Button auf eigenen Nachrichten */
.dwg-del-msg {
	display: none;
	background: none;
	border: none;
	color: #bbb;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 3px 5px;
	border-radius: 4px;
	align-self: center;
	flex-shrink: 0;
	transition: color 0.15s, background 0.15s;
}

.dwg-msg-row--right:hover .dwg-del-msg {
	display: block;
}

.dwg-del-msg:hover {
	color: #c44;
	background: rgba(200, 60, 60, 0.08);
}

/* ── Tipp-Indikator ──────────────────────────────────────────────────────── */

.dwg-typing-row {
	display: flex;
	justify-content: flex-end;
}

.dwg-typing-indicator {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--creme);
	padding: 10px 14px;
	border-radius: var(--bubble-r);
	border-bottom-right-radius: 4px;
	cursor: pointer;
}

.dwg-typing-indicator:hover {
	opacity: 0.85;
}

.dwg-typing-indicator span {
	width:  7px;
	height: 7px;
	background: rgba(2, 30, 80, 0.35);
	border-radius: 50%;
	display: inline-block;
	animation: dwg-bounce 1.3s infinite ease-in-out;
}

.dwg-typing-indicator span:nth-child(2) { animation-delay: 0.18s; }
.dwg-typing-indicator span:nth-child(3) { animation-delay: 0.36s; }

@keyframes dwg-bounce {
	0%, 60%, 100% { transform: translateY(0);    opacity: 0.6; }
	30%           { transform: translateY(-6px); opacity: 1; }
}

/* ── Eingabe-Bereich ─────────────────────────────────────────────────────── */

#dwg-input-bar {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 14px;
	background: #fff;
	border-top: 1px solid #e0ddd0;
	flex-shrink: 0;
}

#dwg-user-input {
	flex: 1;
	/*border: 1px solid #ccc9b0;*/
	border-radius: 20px;
	padding: 9px 16px;
	font-family: var(--font-copy);
	font-size: 1.9rem;
	resize: none;
	outline: none;
	line-height: 1.5;
	max-height: 120px;
	overflow-y: auto;
	transition: border-color 0.2s;
	background: #DDE6FB;
	color:var(--blau);
}

#dwg-user-input:focus {
	border-color: var(--var-blau);
	background: #fff;
}

#dwg-send-btn {
	width:  40px;
	height: 40px;
	border-radius: 50%;
	background: var(--blau);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: opacity 0.2s, transform 0.12s;
}

#dwg-send-btn:hover {
	opacity: 0.85;
	transform: scale(1.06);
}

#dwg-send-btn svg {
	width:  15px;
	height: 15px;
	margin-left: 1px; /* optische Zentrierung des Send-Icons */
}

/* ── Topic-Navigation ────────────────────────────────────────────────────── */

#dwg-topic-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px 12px;
	background: #fff;
	flex-shrink: 0;
}

#dwg-prev-topic,
#dwg-next-topic {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	color: var(--blau);
	font-family: var(--font-copy);
	font-size: 1.5rem;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 6px;
	transition: background 0.15s, opacity 0.15s;
}

#dwg-prev-topic:hover,
#dwg-next-topic:hover {
	background: rgba(31, 90, 226, 0.08);
}

#dwg-prev-topic:disabled,
#dwg-next-topic:disabled {
	opacity: 0.25;
	cursor: default;
}

#dwg-prev-topic:disabled:hover,
#dwg-next-topic:disabled:hover {
	background: none;
}

#dwg-prev-topic svg,
#dwg-next-topic svg {
	width:  16px;
	height: 16px;
	flex-shrink: 0;
}

/* ── Einblend-Animation ──────────────────────────────────────────────────── */

.dwg-bubble-enter {
	animation: dwg-pop 0.22s ease-out both;
}

@keyframes dwg-pop {
	from { opacity: 0; transform: scale(0.85) translateY(8px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
	.dwg-bubble {
		max-width: 86%;
		/*font-size: 0.875rem;*/
	}

	.dwg-bubble--topic-preview {
		/*font-size: 0.9rem;*/
	}

	#dwg-chat {
		height: 100svh;
		border-radius: 0;
		border: none;
		box-shadow: none;
	}
}