/* --- BUTTON --- */
#chat-trigger {
    position: fixed !important; 
	bottom: 20px; 
	right: 10px;
    width: 40px; 
	height: 40px;
    background: #ff6600 !important; color: white !important;
    border-radius: 50%; display: flex !important;
    justify-content: center; align-items: center;
    font-size: 30px; cursor: pointer; z-index: 99999;
	}

/* --- WIDGET --- */
#handwerk-chat-widget {
    position: fixed !important; bottom: 90px; right: 20px;
    width: 320px; height: 420px;
    background: #ffffff !important;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: flex !important; flex-direction: column !important;
    z-index: 99998;
    transition: transform 0.3s ease;
	}

#handwerk-chat-widget.chat-closed { 
	transform: translateY(120%); 
	opacity: 0; 
	}

/* --- HEADER --- */
/* Header-Design */
/* --- HEADER --- */
#chat-header {
    background-color: #ff6600 !important;
    color: white !important;
    padding: 10px 15px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: 8px 8px 0 0 !important;
    height: 40px !important; /* Feste Höhe für bessere Ausrichtung */
	}

/* Der Schließen-Button - Einheitliche Definition */
#close-chat-btn {
    background: transparent !important; /* Durchsichtig ist hier sauberer */
    color: white !important;           /* Kreuz in Weiß passt besser auf den orangefarbenen Header */
    border: none !important;
    font-size: 20px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    padding: 0 5px !important;
    line-height: 1 !important;
    outline: none !important;
    transition: opacity 0.2s;
	}

#close-chat-btn:hover {
    opacity: 0.7;
	}

#chat-input-container {
    display: flex !important;
    flex-direction: row !important; /* Erzwingt die Zeile */
    align-items: center !important; /* Zentriert Input und Button vertikal */
    padding: 10px !important;
    background: #f4f4f4 !important;
    border-top: 1px solid #ccc;
    box-sizing: border-box !important;
    width: 100% !important;
	}

#chat-input {
    flex: 1 !important; /* Input nimmt den Platz */
    padding: 8px !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px !important; /* Abstand zum Button */
    min-width: 0 !important; /* Wichtig, damit Input nicht aus Container ausbricht */
	}


#chat-header button {
    background: transparent !important; /* Hintergrund durchsichtig machen */
    border: none !important;            /* Rahmen weg */
    color: black !important;            /* Kreuz schwarz */
    font-size: 24px !important;         /* Kreuz größer */
    font-weight: bold !important;
    cursor: pointer !important;
    padding: 0 5px !important;
    line-height: 1 !important;
    box-shadow: none !important;        /* Falls ein Browser Schatten hinzufügt */
    outline: none !important;           /* Falls der Browser den Klick-Rahmen anzeigt */
	}

/* Hover-Effekt: Etwas durchsichtiger beim Drüberfahren */
#chat-header button:hover {
    color: #333 !important;
	}

#chat-send-btn {
    flex: 0 0 auto !important; /* Button wächst nicht mit */
    padding: 8px 12px !important;
    background-color: #ff6600 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
	}

/* --- NACHRICHTEN (Flex-Bereich) --- */
#chat-body { 
	flex: 1 !important; 
	display: flex !important; 
	flex-direction: column !important; 
	overflow: hidden; 
	}
	
#chat-messages {
    flex: 1 !important; display: flex !important;
    flex-direction: column !important; 
    overflow-y: auto !important; 
	padding: 5px;
    gap: 5px;
	}

.message { 
	padding: 8px 8px; 
	border-radius: 6px; 
	max-width: 80%; 
	font-size: 11px !important; 
	}
	
.bot-message { 
	background: #e8e8e8 !important; 
	align-self: flex-start !important; 
	}

.user-message { 
	background: #ff6600 !important; 
	color: white !important; 
	align-self: flex-end !important; 
	}

.bot-message strong, .user-message strong {
	color:black;
}