/* Datei: fwe-mitmachen-chat/assets/css/frontend.css */
/* Chat UI – orientiert an den bestehenden Tokens/Styles der Website (siehe assets/css/frontend.css).
   Keine Änderung an :root etc. hier; wir nutzen nur vorhandene Variablen. */

/* =========================
   Card (an .fwe-card / .fwe-cardpad angelehnt)
   ========================= */
.fwe-mc-card{
	background:#fff;
	border:1px solid var(--fwe-border);
	border-radius: var(--fwe-radius);
	box-shadow: var(--fwe-shadow);
	overflow:hidden;
	color: var(--fwe-text);
}

.fwe-mc-cardpad{
	padding: 18px !important; /* wie .fwe-cardpad */
}

/* =========================
   Restart Button
   ========================= */
.fwe-mc-restart{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	min-height:42px;
	padding:10px 16px;

	border-radius:999px !important;
	border:1px solid rgba(11,58,115,.22);
	background: rgba(11,58,115,.08);

	color: var(--fwe-blue) !important;

	transform:none !important;

	font-weight:900 !important;
	font-size:12.5px;
	line-height:1;

	cursor:pointer;
	text-decoration:none !important;

	box-shadow: 0 8px 18px rgba(0,0,0,.05);

	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease, color .15s ease;
}

.fwe-mc-restart:hover,
.fwe-mc-restart:focus{
	transform: translateY(-1px) !important;
	box-shadow: 0 12px 24px rgba(0,0,0,.07);
	border-color: rgba(11,58,115,.30);
	background: rgba(11,58,115,.12);
	color: var(--fwe-blue) !important;
	text-decoration:none !important;
}


/* =========================
   Cardlink Button
   ========================= */
.fwe-mc-cardlink-btn{
	margin-top:10px;

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

	min-height:42px;
	padding:10px 16px;

	border-radius:999px !important;
	border:1px solid rgba(11,58,115,.22);
	background: rgba(11,58,115,.08);

	color: var(--fwe-blue) !important;

	transform:none !important;

	font-weight:900 !important;
	line-height:1;
	text-decoration:none !important;

	box-shadow: 0 8px 18px rgba(0,0,0,.05);

	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease, color .15s ease;
}

.fwe-mc-cardlink-btn:hover,
.fwe-mc-cardlink-btn:focus{
	transform: translateY(-1px) !important;
	box-shadow: 0 12px 24px rgba(0,0,0,.07);
	border-color: rgba(11,58,115,.30);
	background: rgba(11,58,115,.12);
	color: var(--fwe-blue) !important;
	text-decoration:none !important;
}

/* =========================
   Header (an .fwe-cardhead angelehnt)
   ========================= */
.fwe-mc-header{
	display:flex;
	align-items:center;
	gap:12px;

	padding: 16px 18px;
	border-bottom: 1px solid rgba(0,0,0,.08);
	background: #fff;
}

.fwe-mc-avatar{
	width:44px;
	height:44px;
	border-radius: 14px; /* nah an fwe-cardicon */
	overflow:hidden;

	border:1px solid rgba(11,58,115,.18);
	background: rgba(11,58,115,.08);
	flex: 0 0 44px;
}

.fwe-mc-avatar img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.fwe-mc-headtext{ flex: 1 1 auto; min-width: 0; }

.fwe-mc-name{
	font-weight: 900;
	color: var(--fwe-blue);
	line-height: 1.1;
	letter-spacing: -0.1px;
}

.fwe-mc-role{
	color: var(--fwe-muted);
	font-size: 12.5px;
	font-weight: 600;
	margin-top: 2px;

	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}



/* =========================
   Thread (an fwe-timeline / canvas-feeling angelehnt)
   ========================= */
.fwe-mc-thread{
	padding: 14px 18px 18px 18px;

	display:flex;
	flex-direction: column;
	gap: 10px;

	min-height: 240px;
	max-height: 520px;
	overflow:auto;
	scrollbar-width: thin;

	background: #fff;
}

/* =========================
   Message Rows / Bubbles
   ========================= */
.fwe-mc-row{
	display:flex;
	gap:10px;
	align-items:flex-end;
}

.fwe-mc-row.is-user{ justify-content:flex-end; }
.fwe-mc-row.is-bot{ justify-content:flex-start; }

/* Bubble: an Card/Soft-Panel angelehnt */
.fwe-mc-bubble{
	max-width: min(78%, 640px);
	padding: 10px 12px;

	border-radius: 18px;
	border: 1px solid rgba(0,0,0,.12);
	background: rgba(255,255,255,.96);

	color: var(--fwe-text);
	line-height: 1.6;
	font-size: 14px;
	font-weight: 600;

	box-shadow: 0 10px 24px rgba(0,0,0,.06);
	overflow-wrap: anywhere;
}

.fwe-mc-row.is-bot .fwe-mc-bubble{
	border-color: rgba(11,58,115,.16);
	background: rgba(11,58,115,.06);
}

.fwe-mc-row.is-user .fwe-mc-bubble{
	border-color: rgba(194,29,46,.18);
	background: rgba(194,29,46,.06);
}

/* Links: wie Chips/Headline-Farbe */
.fwe-mc-bubble a{
	color: var(--fwe-blue);
	font-weight: 900;
	text-decoration: underline;
}

.fwe-mc-meta{
	font-size: 12px;
	color: var(--fwe-muted);
	font-weight: 600;
	margin-top: 4px;
}

/* =========================
   Typing Indicator (soft panel)
   ========================= */
.fwe-mc-typing{
	margin: 8px 18px 0 18px;
	padding: 10px 12px;

	border-radius: 16px;
	border: 1px dashed rgba(0,0,0,.18);
	background: rgba(0,0,0,.02);

	display:flex;
	align-items:center;
	gap:10px;
}

.fwe-mc-typingdots{
	display:inline-flex;
	gap:5px;
}

.fwe-mc-typingdots i{
	width:7px;
	height:7px;
	border-radius: 999px;
	background: rgba(0,0,0,.25);
	display:block;
	animation: fweMcDot 1.1s infinite ease-in-out;
}

.fwe-mc-typingdots i:nth-child(2){ animation-delay: .12s; }
.fwe-mc-typingdots i:nth-child(3){ animation-delay: .24s; }

@keyframes fweMcDot{
	0%, 80%, 100%{ transform: translateY(0); opacity:.35; }
	40%{ transform: translateY(-4px); opacity: 1; }
}

.fwe-mc-typingtext{
	color: var(--fwe-muted);
	font-size: 13px;
	font-weight: 700;
}

/* Safety: ensure [hidden] really hides the typing box, even if theme overrides */
.fwe-mc-typing[hidden]{
	display:none !important;
}

/* =========================
   Quick Replies (wie Chiprow/Pills)
   ========================= */
.fwe-mc-quick{
	padding: 12px 18px 18px 18px;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

/* Chip: an .fwe-pill angelehnt */
.fwe-mc-chip{
	display:inline-flex;
	align-items:center;
	gap:8px;

	padding: 10px 14px;
	border-radius: 999px;

	border: 1px solid rgba(0,0,0,.12);
	background: rgba(255,255,255,.96);

	color: var(--fwe-text);
	font-weight: 900;
	font-size: 12.5px;
	line-height: 1;

	cursor:pointer;
	user-select:none;

	box-shadow: 0 8px 18px rgba(0,0,0,.05);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.fwe-mc-chip:hover{
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(0,0,0,.07);
	border-color: rgba(11,58,115,.28);
	background: rgba(11,58,115,.06);
}

/* =========================
   Card Link (wie Editorial Card / Modal Item)
   ========================= */
.fwe-mc-cardlink{
	border:1px solid rgba(0,0,0,.10);
	border-radius: 18px;
	background: rgba(255,255,255,.98);
	padding: 12px 12px;

	box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.fwe-mc-cardlink-title{
	font-weight: 950;
	color: var(--fwe-blue);
	letter-spacing: -0.1px;
}

.fwe-mc-cardlink-text{
	margin-top: 4px;
	color: var(--fwe-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
}


/* =========================
   Responsive
   ========================= */
@media (max-width: 680px){
	.fwe-mc-thread{ max-height: 420px; }
	.fwe-mc-bubble{ max-width: 92%; }
	.fwe-mc-header{ padding: 14px 14px; }
	.fwe-mc-thread{ padding: 12px 14px 14px 14px; }
	.fwe-mc-quick{ padding: 12px 14px 14px 14px; }
	.fwe-mc-typing{ margin-left: 14px; margin-right: 14px; }
}