.chat-window {
	min-height: 50vh; 
	padding: .5rem;
	border-radius: 1rem 1rem 0 0;
	border: 1px solid rgba(var(--bs-green-m-rgb),0.4);
	overflow-y: auto; 
	display: flex; 
	flex-direction: column-reverse;
}
.card-chat {
	margin: 0 0 2rem 0;
}
.card-chat .card-header {
	background-color: #0e2b4d; 
  color: #fff;
}

.chat-footer {
 margin: 0 0 0 0;
 padding: 1.5rem;
 border-radius: 0 0 1rem 1rem;
}

.chat-message {
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	border-radius: 1rem;
	max-width: 80%;
	line-height: 1.4;
}

.chat-message table {
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
}

.chat-message table td, .chat-message table th {
  vertical-align: top;
  border-bottom: 1px solid rgba(var(--bs-info-rgb),.4);
}


/* Specifieke styling voor het bericht van de gebruiker */
.user-message {
	background-color: rgba(var(--bs-success-rgb),0.1);
	border-bottom-right-radius: 0.25rem; 
	position: relative;
	padding: 50px 1.3rem 1rem 1.3rem;
	align-self: flex-end;
	border-radius: 1rem;
	width: 100%;
	flex-direction: column;
}

/* Specifieke styling voor het antwoord van de AI */
.assistant-message {
	background-color: rgba(var(--bs-green-m-rgb),0.1); 
	align-self: flex-start; 
	border-bottom-left-radius: 0.25rem; 
	position: relative;
	padding: 60px 1.3rem 1rem 1.3rem;
	display: flex;
	border-radius: 1rem;
	width: 100%;
	flex-direction: column; /* Zorgt dat toolbar en content onder elkaar komen */
}



.is-system-message {
	background: rgba(var(--bs-danger-rgb), 0.2);
	padding: .5rem 1rem;
}

/* Aanpassing voor de 'denk' indicator om consistent te zijn */
#typing-indicator .spinner-grow {
    animation-duration: 1.5s;
}

#user-input {
    resize: none; /* Verberg de handmatige resize-handle */
    overflow-y: hidden; /* Verberg de scrollbar */
}

/* Een kleine animatie om nieuwe berichten in te laten 'faden' */
.chat-message {
  animation: fadeIn 0.5s ease-in-out;
}

.chat-status {
	margin: 1rem;
	width: 250px;
	font-weight: 600;
	font-size: 12pt;
	line-height: 14pt;
	padding: .5rem .5rem .5rem 1rem;
	border-radius: 10px;
	background: var(--bs-green);
	color: var(--bs-white);
}

.status-indicator {
	font-style: italic;
	display: flex;
	align-items: center;
	gap: 0.5rem; /* Ruimte tussen icoon en tekst */
	animation: fadeIn 0.3s ease-in-out;
}

/* Animatie voor de spinner */
.status-indicator .fa-spinner {
    animation: fa-spin 2s infinite linear;
}

.deactivate-btn{
	padding-top: 5px;
}

.conversation-header {
	max-height: 52px;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: block !important;
	font-weight: 500;
	padding-right: 10px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-toolbar {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	padding: .2rem;
	border-radius: 1rem;
	background: linear-gradient(90deg,rgba(var(--bs-green-m-rgb), 0.5) 0%, rgba(var(--bs-green-m-rgb), .2) 100%);
	display: flex;
	justify-content: flex-end;
	margin-bottom: 8px; 
	transition: opacity 0.2s ease-in-out;
	border: 2px solid #fff;
}

.user-message .message-toolbar {
	background: linear-gradient(90deg,rgba(var(--bs-success-rgb), 0.2) 0%, rgba(var(--bs-success-rgb), .1) 100%);
}

.toolbar-title{
	padding: .3rem 1rem .2rem .5rem;
	font-weight: 500;
	font-size: 12pt;
}

.chat-icon {
	height: 18px;
	margin: -3px 3px 0 0;
	width: auto;
}

.message-toolbar .btn {
  padding: 0.15rem 1rem;
}

/* De daadwerkelijke content van het bericht */
.message-content {
    width: 100%;
}

.message-sources{
	margin-top: 1.5rem;
	min-height: 10px;
}

.chat-disclaimer {
	margin: 1rem 0 0 0;
	font-size: 10pt;
	line-height: 12pt;
}

/* Basisinstellingen voor ALLE actieknoppen */
.dropdown-toggle .icon-default {
    display: inline-block;
}
.dropdown-toggle .icon-feedback {
    display: none;
}

/* Feedback staat: wanneer de .is-copied klasse wordt toegevoegd aan de hoofdknop */
.dropdown-toggle.is-copied .icon-default {
    display: none;
}
.dropdown-toggle.is-copied .icon-feedback {
    display: inline-block;
}

.message-content ul {
  list-style-type: "\276f   ";
	padding: 0 1.4rem;
}

.message-content ul li {
	margin:  0;
	padding: 0 10px;
}

.message-content ul li p {
	margin:  0;
	font-weight: 500;
}

.message-content ul li::marker {
	font-size: 14px;
	color: var(--bs-lightblue);
}

.message-content li > ul > li::marker {
	font-size: 12px;
	color: var(--bs-gray-dark);
}