/* ----------------------------------------------- */
/* Theme overwrite ------------------------------- */
/* ----------------------------------------------- */

:root {
--color-body:#EEEEEE;
--color-primary-rgb:238, 238, 238;

--color-text:#000000;
--color-primary-rgb:0, 0, 0;

--color-primary:#007432;
--color-primary-rgb:0, 116, 50;
--color-primary-text:#FFFFFF;

--color-secondary:#E6EFE8;
--color-secondary-rgb:230,239,232;
--color-secondary-text:#000000;

--color-bot:#E6EFE8;
--color-bot-rgb:230,239,232;
--color-bot-text:#000000;

--color-user:#FAFEFB;
--color-user-rgb:250,254,251;
--color-user-text:#000000;
}

.aud {
}
.aud::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 28px;
	
	background-image: url(/application/anybot/media/aud-logo.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
	vertical-align: middle; /* Optional: Richtet das Icon mittig zum Text aus */
	margin-top: -4px;
}


.exsys {
}
.exsys::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 20px;
	
	background-image: url(/application/anybot/media/exsys-logo.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
	vertical-align: middle; /* Optional: Richtet das Icon mittig zum Text aus */
	margin-right: 5px;
	margin-top:-2px;
}

.exsys span {
	white-space:nowrap;
}
.exsys span::after {
    content: "\00AE";    /* Unicode für das Registerd-Zeichen © */
    font-size: 0.65em;    /* Verkleinert das Zeichen */
    vertical-align: super; /* Schiebt es nach oben */
    margin-left: 2px;     /* Ein kleiner Abstand zum Text davor */
    line-height: 0;       /* Wichtig, damit der Zeilenabstand des restlichen Textes nicht beeinflusst wird */
}

/* ----------------------------------- */
/* - die View-CSS befindet sich in packages/anybot/blocks/anybot/view.css */
/* - wir haben mehrere AnyBots mit verschiedenen Einsatzbereichen, daher muessen die CSS-Angaben */
/*   fuer jeden einzelnen AnyBot vorhanden sein */
/* ----------------------------------- */

.anybot-gahl {
	padding:0px;
}

.anybot-gahl .anybot-chat-container {
	margin-top:25px;
}

.anybot-gahl .btn-primary {
	background-color:var(--color-primary);
	color:var(--color-primary-text);
}

.anybot-gahl .btn-danger {
	background-color:#8A1923 !important;
	color:#FFFFFF;
}


.anybot-gahl .company-copyright {
	text-align:center;
	font-size:12px;
	line-height:1.2;
	margin-top:5px;
	color:#505050;
}
.anybot-gahl .company-copyright a {
	color:#505050 !important;
	text-decoration:none !important;
}
.anybot-gahl .company-copyright a:focus {
	background-color:transparent !important;
}

.anybot-gahl .start-msg {
	margin-top:35px !important;
}

.anybot-gahl .privacy-policy {
	color:var(--color-text);
	font-size:12px;
	line-height:1.2;
	text-align:center;
	padding:5px;
}

.anybot-gahl .helper-button-wrapper {
	position:fixed;
	left:0px;
	right:0px;
	top:0px;
	width:100%;
	z-index:5;
}

.anybot-gahl .helper-button {
	display:inline-block;
	width:calc(50% - 1px);
	padding:5px 0px 5px 0px;

	background-color:rgba(var(--color-primary-rgb),.8);
	color:var(--color-primary-text);

	font-size:12px;
	line-height:1.2;
	text-align:center;

	cursor:pointer;
	border-bottom:1px solid #FFFFFF;
}
.anybot-gahl .helper-button:focus,
.anybot-gahl .helper-button:hover {
	background-color:rgba(var(--color-primary-rgb),1);
}

@media (min-width: 576px) {
	.anybot-gahl .helper-button {
		letter-spacing:1px;
	}
}






.anybot-gahl .helper-content-wrapper {
	position:relative;
}

.anybot-gahl .helper-content {
	display:none;
	position:fixed;
	left:15px;
	right:15px;
	top:35px;
	bottom:120px;
	z-index:5;

	padding:15px;
	overflow-y: auto; 

	border-radius: 18px;
	background-color:rgba(var(--color-body-rgb),.9);
	color:var(--color-text);
}

.anybot-gahl .helper-content h4 {
	font-size:18px;
	line-height:1.2;
}

.anybot-gahl .helper-content .helper-example-questions {
}

.anybot-gahl .helper-content .helper-quick-commands {
}

.helper-content-close-button {
	position:absolute;
	top:8px;
	right:15px;
	display:inline-flex;
	justify-content:center;
	align-items:center;

	width:30px;
	height:30px;
	border-radius:50%;

	background-color:var(--color-primary);
	color:var(--color-primary-text);
	cursor:pointer;
}

.anybot-gahl .helper-button.example-questions {
	float:left;
}

.anybot-gahl .helper-button.quick-commands {
	float:right;
}



.anybot-gahl .text-muted {
	color:var(--color-secondary) !important;
	font-size:15px;
}

.anybot-gahl code {
    word-wrap: break-word;
    color:var(--color-primary-text);
    font-size: inherit;
}

.anybot-gahl .anybot-chat-wrapper {
}

/* 2. Basis-Design für ALLE Blasen */
.anybot-gahl .message-box {
    max-width: 80%;             /* Blase darf max. 80% der Breite einnehmen */
    width: fit-content;         /* Passt sich der Textlänge an */
    padding: 10px 15px;
    border-radius: 18px;        /* Generell runde Ecken */
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border:1px solid #000000;
    font-family: Helvetica, Arial, sans-serif;
	font-size:15px;
	line-height:1.2;
    word-wrap: break-word;

	position:relative;
}

/* 3. Design für USER (Rechts, Blau) */
.anybot-gahl .user-message {
    align-self: flex-end;           /* Schiebt Blase nach RECHTS */
	background-color:rgba(var(--color-user-rgb),.9);
    color:var(--color-user-text);
    text-align: left;
    border-top-right-radius: 2px;/* Kleiner Zipfel unten rechts */

	margin-top:25px;
	margin-right:60px;
}
/* Links */
.anybot-gahl .user-message a {
    color: var(--color-primary-text); 
    text-decoration: underline;
}

/* 4. Design für BOT (Links, Grau/Grünlich) */
.anybot-gahl .bot-message {
    align-self: flex-start;
	background-color:rgba(var(--color-bot-rgb),.9);
    color:var(--color-bot-text);
    border-top-left-radius: 2px; /* Kleiner Zipfel */

	margin-top:25px;
	margin-left:60px;
}

.anybot-gahl .bot-message::before {
	content:"";
	position:absolute;
	top:-25px;
	left:-60px;
	width:50px;
	height:50px;
	background:url(/application/anybot/media/bot-message.png) left top no-repeat;
	background-size:contain;
}
.anybot-gahl .user-message::after {
	content:"";
	position:absolute;
	top:-25px;
	right:-60px;
	width:50px;
	height:50px;
	background:url(/application/anybot/media/user-message.png) left top no-repeat;
	background-size:contain;
}

/* 5. System/RAG/Debug Nachrichten (Mittig oder dezent) */
.anybot-gahl .system-message, 
.anybot-gahl .rag-message, 
.anybot-gahl .helper-message {
    align-self: left;
    max-width:90%;
    font-size: 0.85em;
    background-color: transparent;
    box-shadow: none;
    padding: 5px;
    margin-bottom: 5px;
	padding:15px;
    text-align: left;
}
.anybot-gahl .system-message { 
	background-color: #fff3cd; 
	color: #856404; 
	border-left: 3px solid #ffc107;
}
.anybot-gahl .rag-message { 
	background-color: #f8d7da; 
	color: #721c24; 
	border-left: 3px solid #dc3545;
}
.anybot-gahl .helper-message { 
	background-color: rgba(var(--color-primary-rgb),.8); 
	color: var(--color-primary-text); 
	border-left:none;
}

/* MARKDOWN TABELLEN */
.anybot-gahl .bot-message table, 
.anybot-gahl .helper-message table {
	max-width: 100%; 
	border-collapse: collapse; 
	margin: 10px 0;
}

/* Mobile Styles */
@media screen and (max-width: 768px) {

  /* 1. Tabellen-Struktur aufbrechen */
  .anybot-gahl .bot-message table, 
  .anybot-gahl .bot-message thead, 
  .anybot-gahl .bot-message tbody, 
  .anybot-gahl .bot-message th, 
  .anybot-gahl .bot-message td, 
  .anybot-gahl .bot-message tr,
  .anybot-gahl .helper-message table, 
  .anybot-gahl .helper-message thead, 
  .anybot-gahl .helper-message tbody, 
  .anybot-gahl .helper-message th, 
  .anybot-gahl .helper-message td, 
  .anybot-gahl .helper-message tr {
    display: block;
  }

  /* 2. Header verstecken (aber für Screenreader lassen) */
  .anybot-gahl .bot-message thead tr,
  .anybot-gahl .helper-message thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* 3. Jede Zeile wie eine Karte gestalten */
  .anybot-gahl .bot-message tr,
  .anybot-gahl .helper-message tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
  }

  /* 4. Die Zellen stylen */
  .anybot-gahl .bot-message td,
  .anybot-gahl .helper-message td {
    border: none;
    position: relative;
    padding-left: 50%; /* Platz für das Label schaffen */
    text-align: right; /* Inhalt nach rechts schieben */
    border-bottom: 1px solid #eee;
  }

  /* 5. Das Label aus dem data-Attribut einfügen */
  .anybot-gahl .bot-message td::before,
  .anybot-gahl .helper-message td::before {
    content: attr(data-label); /* Hier passiert die Magie */
    position: absolute;
    top: 0;
    left: 10px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 100%;
  }
}

.anybot-gahl .bot-message th, 
.anybot-gahl .bot-message td, 
.anybot-gahl .helper-message th, 
.anybot-gahl .helper-message td {
	border: 1px solid #ccc; 
	padding: 8px; 
	text-align: left;
}
.anybot-gahl .bot-message th, 
.anybot-gahl .helper-message th {
	background-color: #f0f0f0; 
	font-weight: bold;
}

/* MARKDOWN CODE BLÖCKE */
.anybot-gahl .bot-message pre, 
.anybot-gahl .helper-message pre {
	background-color: #272822; 
	color: #f8f8f2;
	padding: 10px; 
	border-radius: 5px;
	overflow-x: auto; 
	font-family: monospace;
}
.anybot-gahl .bot-message pre code, 
.anybot-gahl .helper-message pre code {
	white-space: pre-wrap;
}

.anybot-gahl .bot-message p {
	margin-top: 5px; 
	margin-bottom: 5px;
}

.anybot-gahl .image-output {
	background-color: #eee; 
	padding: 10px; 
	text-align: center;
}

.anybot-gahl .anybot-gahl .anybot-sources-list {
	list-style-type: disc; margin-top: 5px;
	margin-left: 20px; padding-left: 10px;
	font-size: 0.9em;
}
.anybot-gahl .anybot-sources-list li { margin-bottom: 5px; }
.anybot-gahl .anybot-sources-list a { 
    color: var(--color-primary-text); 
	text-decoration: underline; 
}

/* Layout-Styles für das Chat-Fenster */
.anybot-gahl .anybot-messages {
    display: flex;              /* Flexbox aktivieren */
    flex-direction: column;     /* Elemente untereinander */
    gap: 5px;                   Abstand zwischen den Blasen */

    min-height: 100px; 
	height:calc( 100vh - 130px ) !important;

    overflow-y: auto; 

    margin-bottom: 10px;
	padding-right:15px;
	padding-left:15px;
    background-color: transparent;
}

.is-admin .anybot-gahl .anybot-messages {
	height:calc( 100vh - 400px ) !important;
}

.anybot-gahl .anybot-input-area-wrapper {
	position:fixed;
	left:0px;
	right:0px;
	bottom:0px;
	z-index:10;
	width:100%;
	padding:0px 15px 0px 15px;;
}

.anybot-gahl .anybot-input-area {
    display: flex; 
    gap: 10px; 
    align-items: flex-end;
}

.anybot-gahl .anybot-user-input {
    width: 100%; 
    resize: vertical;
    min-height: 50px;

	border-radius: 20px;        /* Passt zum Chatfenster */
	padding: 12px 15px;         /* WICHTIG: Innenabstand, damit Text nicht an der Rundung klebt */
	border: 1px solid #ccc;     /* Sicherstellen, dass ein Rand da ist */

	font-size:16px;
	line-height:1.4;
}

.anybot-gahl .anybot-controls {
    flex-shrink: 0; /* Verhindert, dass Buttons gequetscht werden */
}

.anybot-gahl .anybot-send-button, 
.anybot-gahl .anybot-stop-button {
    height: 58px; 
    padding: 0 20px;
    cursor: pointer;
}

.anybot-gahl .anybot-stop-button {
    display: none; 
    background-color: #dc3545; 
    color: white; 
    border: 1px solid #bd2130; 
}

/* -------------------------------------------------- */
/* BLINKENDER CURSOR (INLINE FIX) */
/* -------------------------------------------------- */

/* 1. Der Cursor hängt am letzten Element (z.B. <p>) INNERHALB des Streams */
.anybot-gahl .streaming-response > *:last-child::after {
    content: "▋";
    display: inline-block;
    vertical-align: baseline; /* Hält ihn auf der Textlinie */
    margin-left: 2px;
    animation: blink 1s step-start infinite;
    color: var(--color-primary);
    opacity: 0.6;
}

/* 2. Fallback: Ganz am Anfang, wenn noch kein <p> existiert (Text ist leer) */
.anybot-gahl .streaming-response:not(:has(*))::after {
    content: "▋";
    display: inline-block;
    vertical-align: baseline;
    animation: blink 1s step-start infinite;
    color: var(--color-primary);
    opacity: 0.6;
}

/* Die Blink-Animation */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* -------------------------------------------------- */
/* QUICK-COMMANDS */
/* -------------------------------------------------- */

/* Container für das Nebeneinander-Layout */
.anybot-gahl .anybot-flex-layout {
	display: flex;
	gap: 20px; /* Abstand zwischen Chat und Sidebar */
	align-items: flex-start; /* Oben bündig */
}
@media (max-width: 991px) { /* Ab Tablet/Mobile brechen wir um */
	.anybot-gahl .anybot-flex-layout {
		flex-direction: column;
	}
}


/* Der Haupt-Chatbereich (Links) */
.anybot-gahl .anybot-main-column {
	flex: 1; /* Nimmt den verfügbaren Platz */
	min-width: 0; /* Wichtig für Flexbox auf kleinen Screens */
}

/* Die Sidebar (Rechts) */
.anybot-gahl .anybot-quick-sidebar {
	width: 260px; /* Feste Breite für die Sidebar */
	flex-shrink: 0;
	
	/* DESIGN-ANPASSUNG:
	   Exakt wie .anybot-messages aus deinem CSS 
	*/
	background-color: #f7f7f7;
	border: 1px solid #e0e0e0;
	border-radius: 20px; 
	padding: 15px;
	
	/* Optional: Gleiche Höhe wie der Chat-Content wirkt oft gut, 
	   hier aber 'fit-content', damit es sich den Buttons anpasst */
	height: fit-content; 
}
@media (max-width: 991px) { /* Ab Tablet/Mobile brechen wir um */
	.anybot-gahl .anybot-quick-sidebar {
		width: 100%; /* Volle Breite wenn untereinander */
		margin-top: 15px;
	}
}

/* Überschrift in der Sidebar */
.anybot-gahl .anybot-quick-sidebar h5 {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	color: #333;
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
}

/* BUTTON STYLING IN DER SIDEBAR
   Wir nutzen deine .quick-actions .btn Logik, zwingen sie aber auf volle Breite
*/
.anybot-gahl .anybot-quick-sidebar .btn {
	display: block;
	width: 100%;
	margin-bottom: 8px;
	text-align: left;
	white-space: normal; /* Textumbruch erlauben */
	
	/* Dein Pillen-Design übernehmen */
	border-radius: 20px; 
	border: none;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	padding: 8px 15px;
	font-size: 0.9rem;
	transition: all 0.2s ease;
}

.anybot-gahl .anybot-quick-sidebar .btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Trennlinie */
.anybot-gahl .anybot-quick-sidebar hr {
	margin: 15px 0;
	border-top: 1px solid #ddd;
}


/* -------------------------------------------------- */
/* TOOL SIDEBAR */
/* -------------------------------------------------- */

/* Backdrop (Dunkler Hintergrund) */
.anybot-tool-sidebar-backdrop {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); /* Dunkelt den Rest der Seite ab */
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    /* Optional: Auch den Hintergrund weichzeichnen */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.anybot-tool-sidebar-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* Die Sidebar selbst */
.anybot-tool-sidebar {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    max-width: 90vw;
    height: 100%;
    
    /* --- ÄNDERUNG: Hintergrund komplett transparent machen --- */
    background: transparent; 
    
    /* Blur lassen wir hier, das macht den Hintergrund unscharf */
    backdrop-filter: blur(15px);         
    -webkit-backdrop-filter: blur(15px); 
    
    border-left: 1px solid rgba(0, 0, 0, 0.1); /* Rand etwas dunkler für Lightmode */
    
    z-index: 9999;
    box-shadow: -5px 0 25px rgba(0,0,0,0.2);
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.anybot-tool-sidebar.is-open {
    right: 0;
}

/* Header */
.anybot-tool-sidebar-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* --- AUCH HIER TRANSPARENZ --- */
    background: rgba(255, 255, 255, 0.1); /* Etwas heller als der Body */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: inherit; /* Textfarbe erbt vom Body (wichtig für Darkmode) */
}
.anybot-tool-sidebar-title {
    font-weight: bold;
    font-size: 1.1em;
    /* Damit man den Titel auch auf dunklem Grund liest: */
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); 
}
.anybot-tool-sidebar-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    color: inherit; /* Button passt sich der Textfarbe an */
    opacity: 0.7;
    transition: opacity 0.2s;
}
.anybot-tool-sidebar-close:hover {
    opacity: 1;
}

/* Content Area */
.anybot-tool-sidebar-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* WICHTIG: Kein Hintergrund hier! */
    background: transparent; 
}

.anybot-tool-sidebar-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    /* Hintergrund des Iframes selbst auch transparent */
    background: transparent; 
}

.anybot-tool-sidebar-loader {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #999; /* Das könnte man auch noch variable machen */
}