/* ConnectPlus Chat styles */

.cpc-floating-btn{
	position:fixed;
	right:20px;
	bottom:20px;
	width:56px;
	height:56px;
	border-radius:50%;
	background:#024873;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 6px 18px rgba(0,0,0,0.18);
	border:none;
	cursor:pointer;
	z-index:99999;
	overflow:visible;
}

.cpc-chat-window{
	position:fixed;
	right:20px;
	bottom:20px;
	width:480px;
	max-width:calc(100vw - 40px);
	height:72vh;
	max-height:80vh;
	background:#fff;
	border-radius: 4px;
	box-shadow:0 18px 50px rgba(0,0,0,0.25);
	display:flex;
	flex-direction:column;
	overflow:hidden;
	z-index:99999;
}
.cpc-hidden{ display:none !important; }
.cpc-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:10px 12px;
	background:#024873;
	color:#fff;
}
.cpc-title{ font-weight:600; }
.cpc-close{ background:transparent; color:#fff; border:none; font-size:20px; line-height:1; cursor:pointer; }
.cpc-messages{
	padding:12px;
	overflow:auto;
	background:#f6f7f9;
	flex:1 1 auto;
}
.cpc-input{
	border-top:1px solid #e6e6e6;
	padding:10px;
	display:flex;
	gap:8px;
}
.cpc-input-field{ flex:1; padding:8px 10px; border-radius:6px; border:1px solid #ddd; margin-bottom: 0px !important; }
.cpc-input-field::placeholder{ color:#999 !important; }
.cpc-send{ background:#024873; color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; }
.cpc-msg{ margin-bottom:10px; display:block; max-width:85%; }
.cpc-user{ margin-left:auto; text-align:right; }
.cpc-user .cpc-msg-content{ background:#024873; color:#fff; border-radius:16px 16px 4px 16px; padding:8px 12px; display:inline-block; }
.cpc-bot .cpc-msg-content{ background:#dee6eb; color:#024873; border-radius:16px 16px 16px 4px; padding:8px 12px; display:inline-block; }
.cpc-msg-content a{ color:#024873; text-decoration:underline; }
.cpc-msg-loading{ display:inline-block; }
.cpc-dot{ width:6px; height:6px; background:#999; border-radius:50%; display:inline-block; margin:0 3px; opacity:0.9; animation:cpc-dots 1s infinite; }
.cpc-dot:nth-child(2){ animation-delay:0.12s; }
.cpc-dot:nth-child(3){ animation-delay:0.24s; }
@keyframes cpc-dots{ 0%{ transform:translateY(0); opacity:0.3 } 50%{ transform:translateY(-4px); opacity:1 } 100%{ transform:translateY(0); opacity:0.3 } }

/* Pulse animation around floating button (repeats 3 times) */
.cpc-floating-btn::after{
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(1);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(2,72,115,0.18);
	pointer-events: none;
	z-index: 99998;
	animation: cpc-pulse 1.1s ease-out 0s 3;
}

@keyframes cpc-pulse{
	0%{
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.9;
	}
	60%{
		transform: translate(-50%, -50%) scale(1.9);
		opacity: 0.08;
	}
	100%{
		transform: translate(-50%, -50%) scale(2.2);
		opacity: 0;
	}
}

/* Sources displayed under a message bubble */
.cpc-sources{
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.cpc-sources .cpc-source-link{
    font-size:12px;
    color:#024873;
    background: rgba(2,72,115,0.06);
    padding:4px 6px;
    border-radius:4px;
    text-decoration:none;
}
.cpc-sources .cpc-source-link:hover{ text-decoration:underline; }

/* Inline citation sup and references list */
.cpc-cite{ font-size:0.75em; vertical-align:super; margin-left:6px; }
.cpc-cite a{ color:#024873; text-decoration:none; }
.cpc-cite a:hover{ text-decoration:underline; }

.cpc-references{ margin-top:8px; font-size:13px; }
.cpc-references-toggle{ background:transparent; border:none; color:#024873; cursor:pointer; padding:0; font-size:13px; text-decoration:underline; }
.cpc-references-list{ margin-top:6px; }
.cpc-reference-item{ margin-bottom:6px; }
.cpc-reference-link{ color:#024873; text-decoration:underline; font-size:12px; background: rgba(2,72,115,0.04); padding:4px 6px; border-radius:4px; display:inline-block; }
.cpc-reference-page{ color:#666; font-size:12px; margin-left:6px; }
.cpc-hidden{ display:none !important; }

/* Transient label above the floating button: fades in, stays, then fades out */

.cpc-floating-btn.cpc-show-label::before{
	content: 'Frage den Chat';
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	transform: translateX(8px) translateY(-50%);
	background: #024873;
	color: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 13px;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	pointer-events: none;
	opacity: 0;
	animation: cpc-label 3s ease-in-out 0.2s 1 forwards;
	z-index: 100000;
}

@keyframes cpc-label{
	0%{ opacity:0; transform: translateX(8px) translateY(-50%); }
	20%{ opacity:1; transform: translateX(0px) translateY(-50%); }
	70%{ opacity:1; transform: translateX(0px) translateY(-50%); }
	100%{ opacity:0; transform: translateX(8px) translateY(-50%); }
}

/* Responsive */
@media (max-width:480px){
	.cpc-chat-window{ left:8px; right:8px; bottom:8px; width:auto; height:90vh; border-radius:8px; }
	.cpc-floating-btn{ left:12px; bottom:12px; }
}