@import url("var-defaults-fallback.css");
@import url("splitter-ui.css");
@import url("/concrete/css/fontawesome/all.css");

/* ==========================================
   0. GLOBALE EINSTELLUNGEN
   ========================================== */

.anybot-chat-wrapper .fa,
.anybot-chat-wrapper .fas {
	margin-right:5px;
}

div.ccm-page .anybot-chat-wrapper .btn {
	margin-bottom:0px;
}

div.ccm-page .anybot-chat-wrapper .btn-sm {
	padding:5px 15px 5px 15px !important;
}

.sticky {
	position: sticky;
	top: 0;
	bottom: 0;
	z-index: 1;
}

.sticky-top {
	position: sticky;
	top: 0;
	z-index: 1;
}

.sticky-bottom {
	position: sticky;
	bottom: 0;
	z-index: 1;
}


.anybot-chat-wrapper {
}

.anybot-chat-wrapper .text-muted {
	color:var(--color-secondary-text-ab) !important;
	font-size:14px;
}

.anybot-chat-wrapper code {
    word-wrap: break-word;
	background:#000000;
    color:#FFFFFF;
    font-size: inherit;
}

.anybot-h1 {
	font-weight:bold;
	margin-bottom:10px;
}

/* ============================================================ */
/* Linker Bereich                                               */
/* ============================================================ */

.anybot-drawer {
	padding:15px;
}

.anybot-commands-wrapper {
}
.anybot-command {
	font-weight:bold;
	margin:0px 10px 10px 0px !important;
}

.anybot-questions-wrapper {
	margin-bottom:15px;
}
.anybot-questions-wrapper ul {
	list-style:none;
	margin:0px;
	padding:0px;

}

.anybot-quest {
	border-radius:13px;
	padding:2px 5px 2px 5px;
	cursor:pointer;
}
.anybot-quest:hover,
.anybot-quest:focus {
	background-color:rgba(var(--color-primary-rgb-ab), .05);
	color:var(--color-primary-ab);
	border-radius:0px 13px 13px 0px;
}

/* --- Chat-Liste --------------------------------------------- */

.anybot-new-chat {
	padding-bottom:15px;
	background-color:var(--color-secondary-ab);
}

/* Chat-Titel */
.anybot-chat-item-title {
    flex: 1;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
	padding:2px;
}
.anybot-chat-item-title:hover,
.anybot-chat-item-title:focus {
	background-color:rgba(var(--color-primary-rgb-ab), .05);
	color:var(--color-primary-ab);
	border-radius:0px 13px 13px 0px;
}

/* Chat-Eintrag */
.anybot-chat-item {
    display: flex;
    align-items: center;
    gap: 0px;
    border-radius: 6px;
    padding: 0px;
    cursor: pointer;
    position: relative;
}
.anybot-chat-item:hover,
.anybot-chat-item:focus {
}
.anybot-chat-item--active {
}

/* "..."-Button pro Chat-Eintrag */
.anybot-chat-item-menu-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    border-radius: 4px;
    opacity: .2;
    transition: opacity 0.15s, background 0.15s;
}
.anybot-chat-item:hover .anybot-chat-item-menu-btn,
.anybot-chat-item--active .anybot-chat-item-menu-btn {
    opacity: 1;
}
.anybot-chat-item-menu-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-primary-ab);
}

/* ============================================================ */
/* Rechter Bereich                                              */
/* ============================================================ */


.anybot-panel {
	padding:15px;
}

/* --- Upload-Bereich ----------------------------------------- */

.anybot-panel-file-input {
	padding-bottom:15px;
	background-color:var(--color-secondary-ab);
}


/* Fortschrittsanzeige */
.anybot-panel-progress {
    margin-top: 8px;
    font-size: 11px;
    color: var(--color-primary-ab);
    text-align: left;
}
.anybot-panel-progress-text {
    word-break: break-word;
}

/* Gesamtergebnis */
.anybot-panel-result {
    margin-top: 6px;
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 5px;
    text-align: left;
}
.anybot-panel-result--success {
    color: #1a7a3c;
    background: rgba(26,122,60,0.08);
    border: 1px solid rgba(26,122,60,0.2);
}
.anybot-panel-result--error {
    color: #b91c1c;
    background: rgba(185,28,28,0.07);
    border: 1px solid rgba(185,28,28,0.2);
}

/* Dateiliste */
.anybot-panel-file-list {
}

.anybot-panel-file-list-empty {
    font-size: 12px;
    font-style: italic;
    padding: 4px 2px;
}

.anybot-panel-file-item {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 5px 4px;
    border-bottom: 1px solid var(--color-primary-ab);
}
.anybot-panel-file-item:last-child {
    border-bottom: none;
}

.anybot-panel-file-item-info {
    flex: 1;
    overflow: hidden;
}
.anybot-panel-file-item-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
	line-height:1.2;
}
.anybot-panel-file-item-meta {
    font-size: 11px;
}

.anybot-panel-file-delete {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.15s;
}
.anybot-panel-file-delete:hover {
    color: #b91c1c;
}


/* ============================================================ */
/* Mittlerer Bereich                                            */
/* ============================================================ */


/* --- Kontextmenu -------------------------------------------- */

.anybot-context-menu {
    position: fixed;
    z-index: 10100;
    min-width: 140px;
    background: #D0D0D0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: anybot-ctx-appear 0.1s ease;
}
@keyframes anybot-ctx-appear {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
.anybot-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.anybot-context-menu-item:hover {
}
.anybot-context-menu-item.anybot-ctx-delete {
    color: #f87171;
}
.anybot-context-menu-item.anybot-ctx-delete:hover {
    background: rgba(248,113,113,0.1);
}

/* --- Chat-Fenster ------------------------------------------- */

.anybot-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;

	padding:0px 15px 0px 15px;

	height: calc( var(--anybot-height-ab) - var(--splitter-content-headline-height-ab) - var(--navi-height-mobile-ab) - var(--anybot-user-input-height-ab) - 60px ) !important; /* -60px wegen mobile Bedienbarkeit am Smartphone */
    min-height: 300px;

    overflow-x: hidden;
    overflow-y: auto;

    background-color:transparent;
}
body.is-admin .anybot-messages {
	height: calc( var(--anybot-height-ab) - var(--splitter-content-headline-height-ab) - var(--navi-height-mobile-ab) - var(--anybot-user-input-height-ab) - var(--is-admin-ab) - 60px ) !important; /* -60px wegen mobile Bedienbarkeit am Smartphone */
}

@media (min-width: 768px) {
	.anybot-messages {
		height: calc( var(--anybot-height-ab) - var(--splitter-content-headline-height-ab) - var(--navi-height-desktop-ab) - var(--anybot-user-input-height-ab) ) !important;
	}
	body.is-admin .anybot-messages {
		height: calc( var(--anybot-height-ab) - var(--splitter-content-headline-height-ab) - var(--navi-height-desktop-ab) - var(--anybot-user-input-height-ab) - var(--is-admin-ab) ) !important;
	}
}

@media (min-width: 1400px) {
	.anybot-messages {
		height: calc( var(--anybot-height-ab) - var(--splitter-content-headline-height-ab) - var(--navi-height-desktop-ab) - var(--anybot-user-input-height-ab) ) !important;
	}
	body.is-admin .anybot-messages {
		height: calc( var(--anybot-height-ab) - var(--splitter-content-headline-height-ab) - var(--navi-height-desktop-ab) - var(--anybot-user-input-height-ab) - var(--is-admin-ab) ) !important;
	}
}

/* Nachrichten-Blasen */
.message-box {
    max-width: 90%;
    width: fit-content;
    padding: 10px 15px;
    border-radius: 18px;
    line-height: 1.4;
    border: none !important;
    font-family: Arial, sans-serif;
    word-wrap: break-word;
}
.user-message {
    align-self: flex-end;
    background-color: #D8DBE2;
    color:#333;
    text-align: left;
    border-bottom-right-radius: 2px;
	min-width:200px;
}
.user-message a { 
	color: var(--color-primary-ab);
	text-decoration: underline; 
}

.bot-message {
    align-self: flex-start;
    background-color:#EEEFF2;
    color: #333;
    border-bottom-left-radius: 2px;
}

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

/* Input-Bereich */
.anybot-input-area {
	/*
	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	top:auto;

	height:var(--anybot-user-input-height-ab);
	*/

	height:var(--anybot-user-input-height-ab);
	width:100%;
	overflow:hidden;

	padding:5px 15px 5px 15px;
	margin:0px 0px 0px 0px;

    display:flex;
    gap:10px;
    align-items:top;

	font-size:16px;
}

.anybot-user-input {
    width: 100%;
    resize:none;

    border-radius: 20px;
    padding: 6px 12px 6px 12px;
    border: 1px solid #ccc;

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

    border-radius: 0px 20px 20px 0px;
}


.anybot-controls { 
	flex-shrink: 0;
	display: flex;
	gap: 6px;
	align-items: stretch;
	padding-top:6px;
}

.anybot-send-button,
.anybot-stop-button {
    height: 58px;
    width: 44px;
    padding: 0;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid var(--color-border-ab, #98A7B8);
    background: var(--color-secondary-ab, #EEEFF2);
    color: var(--color-secondary-text-ab, #5B5B5B);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align:center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.anybot-send-button .fas,
.anybot-stop-button .fas {
	margin-right:0px;
}

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

/* --- Tabellen -------------------------------------------- */

/* Tabellen Desktop */
.bot-message table,
.helper-message table {
    max-width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}
.bot-message th,
.bot-message td,
.helper-message th,
.helper-message td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
.bot-message th,
.helper-message th {
    background-color: #f0f0f0;
    font-weight: bold;
}

/* Tabellen Mobile */
@media screen and (max-width: 991px) {
	.bot-message table,
	.bot-message thead,
	.bot-message tbody,
	.bot-message th,
	.bot-message td,
	.bot-message tr,
	.helper-message table,
	.helper-message thead,
	.helper-message tbody,
	.helper-message th,
	.helper-message td,
	.helper-message tr { 
		display: block; 
	}

	.bot-message thead tr,
	.helper-message thead tr { 
		position: absolute; top: -9999px; left: -9999px; 
	}
	
	.bot-message tr,
	.helper-message tr { 
		border: 1px solid #ccc; margin-bottom: 10px; padding: 10px; 
	}
	
	.bot-message td,
	.helper-message td {
		border: none;
		position: relative;
		padding-left: 50%;
		text-align: right;
		border-bottom: 1px solid #eee;
	}
	.bot-message td::before,
	.helper-message td::before {
		content: attr(data-label);
		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%;
	}
}


/* --- Code Blöcke -------------------------------------------- */

.bot-message pre,
.helper-message pre {
    background-color:#000000;
    color:#FFFFFF;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: monospace;
}
.bot-message pre code,
.helper-message pre code { 
	white-space: pre-wrap; 
}
.bot-message p { 
	margin-top: 5px; 
	margin-bottom: 5px; 
}

/* --- Streaming Cursor --------------------------------------- */

.streaming-response > *:last-child::after {
    content: "▋";
    display: inline-block;
    vertical-align: baseline;
    margin-left: 2px;
    animation: blink 1s step-start infinite;
    color: var(--color-primary-ab);
    opacity: 0.6;
}
.streaming-response:not(:has(*))::after {
    content: "▋";
    display: inline-block;
    vertical-align: baseline;
    animation: blink 1s step-start infinite;
    color: var(--color-primary-ab);
    opacity: 0.6;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* --- Sonstige -------------------------------------------- */

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

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

/* --- Operator Mode -------------------------------------------- */

.operator-message {
    align-self: flex-start;
    background-color: #b45309;
    color: #fef3c7;
    border-bottom-left-radius: 2px;
}
.operator-message a { 
	color: #fef3c7; 
	text-decoration: underline; 
}
.operator-message strong { 
	color: #fde68a; 
}

/* ============================================================ */
/* MODALS                                                       */
/* ============================================================ */

.anybot-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.anybot-modal {
    background: #D0D0D0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    overflow: hidden;
}
.anybot-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #101010;
    font-weight: 600;
    font-size: 14px;
}
.anybot-modal-close {
    background: none;
    border: none;
    color: #7a8494;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.15s;
}
.anybot-modal-close:hover { color: #d0d6e0; }
.anybot-modal-body {
    padding: 16px;
    color: #101010;
    font-size: 13px;
}
.anybot-modal-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: #101010;
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}
.anybot-modal-input:focus { border-color: var(--color-secondary-ab); }
.anybot-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ── Copy-Button für Bot-Nachrichten ─────────────────────────────────────── */
.bot-message {
    position: relative;
}

.anybot-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    color: #aaa;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    line-height: 1;
    z-index: 2;
}

.bot-message:hover .anybot-copy-btn {
    opacity: 1;
}

.anybot-copy-btn:hover {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.1);
    color: #555;
}

.anybot-copy-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.anybot-copy-label {
    font-size: 11px;
    white-space: nowrap;
    display: none;
}

.anybot-copy-btn.copied {
    color: #1a7a3c;
    border-color: #1a7a3c;
    background: rgba(26,122,60,0.08);
    opacity: 1;
}

.anybot-copy-btn.copied .anybot-copy-label {
    display: inline;
}



/* ============================================================ */
/* TOOL SIDEBAR (rechts, unverändert)                          */
/* ============================================================ */

.anybot-tool-sidebar-backdrop {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.anybot-tool-sidebar-backdrop.is-open { opacity: 1; visibility: visible; }

.anybot-tool-sidebar {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    max-width: 90vw;
    height: 100%;
    background: transparent;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-left: 1px solid rgba(0,0,0,0.1);
    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; }

.anybot-tool-sidebar-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: inherit;
}
.anybot-tool-sidebar-title { font-weight: bold; font-size: 1.1em; 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; opacity: 0.7; transition: opacity 0.2s; }
.anybot-tool-sidebar-close:hover { opacity: 1; }

.anybot-tool-sidebar-content { flex: 1; position: relative; overflow: hidden; background: transparent; }
.anybot-tool-sidebar-content iframe { width: 100%; height: 100%; border: none; background: transparent; }
.anybot-tool-sidebar-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #999; }


/* ============================================================ */
/* USER-CONFIG OVERLAY                                          */
/* (/config user – Persönliche Einstellungen)                  */
/* Bootstrap-5-kompatibel, responsiv für Smartphone/Tablet     */
/* ============================================================ */

/* ── Modal-Größe und Flex-Spalten-Layout ───────────────────── */
/*
 * .anybot-modal erbt overflow:hidden (für border-radius).
 * Damit der Body intern scrollen kann, braucht das Modal
 * ein Flex-Column-Layout mit max-height. Der Body bekommt
 * dann flex:1 + overflow-y:auto + min-height:0 (kritisch!).
 */
.anybot-modal-config {
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;           /* Nie höher als 90 % des Viewports  */
    max-height: 90svh;          /* svh = viewport ohne Browser-Toolbar */
    display: flex;
    flex-direction: column;
}

/* Body-Bereich scrollt, wenn Inhalt nicht passt */
.anybot-modal-config .anybot-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth-Scroll auf iOS         */
    flex: 1 1 auto;
    min-height: 0;              /* Kritisch: ohne dies kein overflow-y  */
}

/* ── Tab-Leiste ─────────────────────────────────────────────── */
.anybot-config-tabs {
    display: flex;
    flex-shrink: 0;             /* Tabs nie wegscrollen                 */
    border-bottom: 1px solid rgba(0,0,0,0.12);
    padding: 0 8px;
    background: rgba(0,0,0,0.03);
    gap: 2px;
}

.anybot-config-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 16px;
    margin-bottom: -1px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: #666;
    transition: color 0.15s ease, border-color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.anybot-config-tab:hover:not([disabled]) {
    color: #222;
}

.anybot-config-tab.active {
    color: #222;
    border-bottom-color: var(--color-primary-ab, #078e8d);
    font-weight: 600;
}

.anybot-config-tab[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
}

/* ── Tab-Panels ─────────────────────────────────────────────── */
.anybot-config-tab-panel {
    /* display wird per JS gesteuert */
}

/* ── Formular-Layout ────────────────────────────────────────── */
.anybot-config-form {
    /* initial per style="display:none" verborgen, JS schaltet um */
}

.anybot-config-field-group {
    margin-bottom: 14px;
}

.anybot-config-field-group:last-child {
    margin-bottom: 0;
}

.anybot-config-field-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.anybot-config-input,
.anybot-config-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 6px;
    font-size: 13px;
    color: #202020;
    background: #ffffff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.anybot-config-input:focus,
.anybot-config-select:focus {
    border-color: var(--color-primary-ab, #078e8d);
    box-shadow: 0 0 0 2px rgba(7,142,141,0.12);
}

/* Pfeil für native <select> */
.anybot-config-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* ── Ladeanzeige ────────────────────────────────────────────── */
.anybot-config-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    color: #888;
    font-size: 13px;
    gap: 8px;
}

/* ── Feedback-Box (Erfolg / Fehler) ────────────────────────── */
.anybot-config-feedback {
    margin-top: 14px;
    padding: 9px 13px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.anybot-config-feedback-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.anybot-config-feedback-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ── STT-Placeholder ────────────────────────────────────────── */
.anybot-config-stt-placeholder {
    color: #888;
    font-size: 13px;
    line-height: 1.6;
    padding: 4px 0;
}


/* ============================================================ */
/* USER-CONFIG OVERLAY – Responsive                            */
/* Bootstrap-5-Breakpoints: sm=576, md=768, lg=992             */
/* ============================================================ */

/* ── Tablet / schmales Browserfenster (< 768px) ────────────── */
@media (max-width: 767.98px) {

    .anybot-modal-config {
        width: calc(100% - 24px); /* 12px Rand links + rechts   */
        max-width: calc(100% - 24px);
        max-height: calc(100vh - 24px);
        max-height: calc(100svh - 24px);
    }

    .anybot-config-tab {
        padding: 8px 12px;
    }
}

/* ── Smartphone (< 576px) ───────────────────────────────────── */
@media (max-width: 575.98px) {

    /* Modal: volle Breite, kleiner Rand, maximal fast ganzer Viewport */
    .anybot-modal-config {
        width: calc(100% - 12px);
        max-width: calc(100% - 12px);
        max-height: calc(100vh - 12px);
        max-height: calc(100svh - 12px);
        border-radius: 14px;    /* Alle Ecken abgerundet auf Mobile     */
    }

    /* Tab-Leiste: enger */
    .anybot-config-tabs {
        padding: 0 4px;
    }

    .anybot-config-tab {
        padding: 8px 10px;
        font-size: 12px;
        gap: 3px;
    }

    /* Body-Padding reduzieren */
    .anybot-modal-config .anybot-modal-body {
        padding: 12px;
    }

    /* ──────────────────────────────────────────────────────────
     * iOS Safari Auto-Zoom-Fix:
     * Inputs und Selects mit font-size < 16px lösen auf iOS
     * einen automatischen Viewport-Zoom aus. 16px verhindert das.
     * ────────────────────────────────────────────────────────── */
    .anybot-config-input,
    .anybot-config-select {
        font-size: 16px;
        padding: 10px 12px;     /* Etwas größere Touch-Targets          */
    }

    .anybot-config-select {
        padding-right: 32px;
    }

    /* Feldabstand etwas größer für Touch-Bedienung */
    .anybot-config-field-group {
        margin-bottom: 16px;
    }

    /* Labels: besser lesbar auf kleinen Screens */
    .anybot-config-field-group label {
        font-size: 12px;
        margin-bottom: 6px;
    }

    /* Footer: Buttons gestapelt, volle Breite */
    .anybot-modal-config .anybot-modal-footer {
        flex-direction: column-reverse; /* Primär-Button oben (reverse!)  */
        gap: 8px;
        padding: 10px 12px;
    }

    .anybot-modal-config .anybot-modal-footer .btn {
        width: 100%;
        justify-content: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Feedback-Box: kleinerer Font reicht auf Mobile */
    .anybot-config-feedback {
        font-size: 12px;
    }
}

/* ============================================================ */
/* STT: Mikrofon-Button                                         */
/* ============================================================ */

.anybot-mic-button {
    height: 58px;
    width: 44px;
    padding: 0;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid var(--color-border-ab, #98A7B8);
    background: var(--color-secondary-ab, #EEEFF2);
    color: var(--color-secondary-text-ab, #5B5B5B);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.anybot-mic-button:hover {
    background: var(--color-border-ab, #98A7B8);
    color: #fff;
}

/* Aktiv (Pipeline läuft) – pulsierendes Rot */
.anybot-mic-button.anybot-mic-active {
    background: #dc3545;
    color: #fff;
    border-color: #bd2130;
    animation: anybot-mic-pulse 1.4s ease-in-out infinite;
}

@keyframes anybot-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(220,53,69,0.55); }
    50%       { box-shadow: 0 0 0 6px rgba(220,53,69,0);    }
}

.anybot-mic-button .fas,
.anybot-mic-button .fa {
    margin-right: 0;   /* Icon zentriert – kein Rechts-Abstand */
}


/* ============================================================ */
/* STT: Status-Leiste unterhalb des Input-Bereichs              */
/* ============================================================ */

.anybot-stt-status {
    font-size: 12px;
    line-height: 1.35;
    padding: 3px 14px 3px 14px;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
    border-radius: 0 0 6px 6px;
    color: #666;
}

/* Sichtbar sobald ein Status gesetzt ist (nicht idle/leer) */
.anybot-stt-s-listen,
.anybot-stt-s-rec,
.anybot-stt-s-send,
.anybot-stt-s-ok,
.anybot-stt-s-warn {
    max-height: 36px;
    opacity: 1;
    padding: 5px 14px;
}

/* Idle – komplett kollabiert */
.anybot-stt-s-idle {
    max-height: 0;
    opacity: 0;
    padding: 0 14px;
}

/* Farb-Varianten */
.anybot-stt-s-listen { color: #0069c0; background: #e8f0fe; }
.anybot-stt-s-rec    { color: #8a1c1c; background: #fde8e8; }
.anybot-stt-s-send   { color: #7a5200; background: #fff3cd; }
.anybot-stt-s-ok     { color: #155724; background: #d4edda; }
.anybot-stt-s-warn   { color: #6b3000; background: #fce8d3; }

/* Pulsierender Dot für "Lauscht" */
.anybot-stt-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    vertical-align: middle;
    animation: anybot-stt-blink 1.2s ease-in-out infinite;
}

@keyframes anybot-stt-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}


/* ============================================================ */
/* STT: Modus-5 Kanal-Indikator                                 */
/* ============================================================ */

.anybot-stt-m5-indicator {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 3px 12px;
    background: #fde8e8;
    color: #8a1c1c;
    border-radius: 0 0 6px 6px;
    border-top: 1px solid rgba(220,53,69,0.2);
}

.anybot-stt-m5-indicator .fas,
.anybot-stt-m5-indicator .fa {
    margin-right: 4px;
    animation: anybot-mic-pulse 1.0s ease-in-out infinite;
}


/* ============================================================ */
/* STT: Training UI – Sample-Liste                              */
/* ============================================================ */

.anybot-stt-sample-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 13px;
}

.anybot-stt-sample-item:last-child {
    border-bottom: none;
}

.anybot-stt-sample-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-secondary-ab, #EEEFF2);
    color: var(--color-secondary-text-ab, #5B5B5B);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.anybot-stt-sample-frames {
    flex: 1;
    color: #888;
    font-size: 12px;
}

.anybot-stt-del-btn.btn-sm {
    padding: 2px 7px !important;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

/* Aufnahme-Button im aktiven Zustand */
.anybot-stt-rec-active {
    background: #dc3545 !important;
    border-color: #bd2130 !important;
    color: #fff !important;
    animation: anybot-mic-pulse 1.0s ease-in-out infinite;
}


/* ============================================================ */
/* STT: Qualitäts-Dots (Training-UI)                            */
/* ============================================================ */

/* Drei Dots pro Sample: RMS | Sprachanteil | DTW-Konsistenz    */
.anybot-stt-q-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: help;
    /* Leichte Border damit auch auf hellem Hintergrund sichtbar */
    border: 1px solid rgba(0,0,0,0.10);
}

.anybot-stt-dot-good { background: #28a745; }
.anybot-stt-dot-warn { background: #fd7e14; }
.anybot-stt-dot-bad  { background: #dc3545; }
.anybot-stt-dot-na   { background: #ccc; }


/* ============================================================ */
/* STT: Feedback-Klassen (für JS: anybot-config-ok/error/info)  */
/* Ergänzt die bestehenden .anybot-config-feedback-* Klassen    */
/* ============================================================ */

.anybot-config-ok,
.anybot-config-error,
.anybot-config-info {
    display: block;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.anybot-config-ok {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.anybot-config-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.anybot-config-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}


/* ============================================================ */
/* STT: Sub-Tabs im Spracherkennung-Tab                         */
/* ============================================================ */

.anybot-config-subtabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 2px solid rgba(0,0,0,0.08);
    padding-bottom: 0;
}

.anybot-config-subtab {
    background: none;
    border: none;
    padding: 6px 14px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #777;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;   /* Überschreibt den Container-Border */
    border-radius: 4px 4px 0 0;
    transition: color 0.15s, border-color 0.15s;
}

.anybot-config-subtab:hover {
    color: var(--color-primary-ab, #078e8d);
}

.anybot-config-subtab.active {
    color: var(--color-primary-ab, #078e8d);
    border-bottom-color: var(--color-primary-ab, #078e8d);
}

.anybot-config-subtab[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.anybot-config-subtab-panel {
    /* Sichtbarkeit per JS gesteuert */
}


/* ============================================================ */
/* STT: User-Bar (Kanal + Modus unter dem Eingabebereich)       */
/* ============================================================ */

.anybot-stt-user-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-secondary-ab, #EEEFF2);
    border-radius: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.anybot-stt-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-secondary-text-ab, #5B5B5B);
    white-space: nowrap;
}

.anybot-stt-channel-select,
.anybot-stt-mode-select {
    font-size: 12px;
    padding: 2px 6px;
    border: 1px solid var(--color-border-ab, #98A7B8);
    border-radius: 4px;
    background: #fff;
    color: #333;
    cursor: pointer;
    max-width: 160px;
}

.anybot-stt-channel-select option[disabled],
.anybot-stt-mode-select option[disabled] {
    color: #aaa;
}


/* ============================================================ */
/* STT: Kanal-Tabs (Training-Sub-Tab)                           */
/* ============================================================ */

.anybot-stt-channel-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.anybot-stt-ch-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--color-border-ab, #98A7B8);
    border-radius: 6px;
    background: var(--color-secondary-ab, #EEEFF2);
    color: var(--color-secondary-text-ab, #5B5B5B);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.anybot-stt-ch-tab:hover {
    background: #dde2ea;
}

.anybot-stt-ch-tab.active {
    background: var(--color-primary-ab, #078e8d);
    border-color: var(--color-primary-ab, #078e8d);
    color: #fff;
}

.anybot-stt-ch-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 400;
    padding: 1px 5px;
    border-radius: 10px;
    background: rgba(0,0,0,0.12);
    color: inherit;
    white-space: nowrap;
}

.anybot-stt-ch-tab.active .anybot-stt-ch-badge {
    background: rgba(255,255,255,0.25);
}

.anybot-stt-ch-badge.badge-trained   { background: rgba(40,167,69,0.18); color: #155724; }
.anybot-stt-ch-badge.badge-untrained { background: rgba(0,0,0,0.08);     color: #888;    }
.anybot-stt-ch-tab.active .anybot-stt-ch-badge.badge-trained   { background: rgba(255,255,255,0.3); color:#fff; }
.anybot-stt-ch-tab.active .anybot-stt-ch-badge.badge-untrained { background: rgba(255,255,255,0.15); color:rgba(255,255,255,0.7); }


/* ============================================================ */
/* STT: Info-Bar im Chat-Fenster (Read-only, ersetzt Dropdowns) */
/* ============================================================ */

.anybot-stt-info-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--color-secondary-ab, #EEEFF2);
    border-radius: 6px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--color-secondary-text-ab, #5B5B5B);
}

.anybot-stt-info-item {
    white-space: nowrap;
    font-weight: 500;
}

.anybot-stt-info-sep {
    color: #bbb;
    font-weight: 300;
}


/* ============================================================ */
/* STT: Konfig-Selektoren im User-Config-Modal                  */
/* ============================================================ */

.anybot-stt-cfg-selectors {
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 0;
}

.anybot-stt-cfg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 540px) {
    .anybot-stt-cfg-row { grid-template-columns: 1fr; }
}

.anybot-stt-cfg-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--color-secondary-text-ab, #5B5B5B);
}


/* ============================================================ */
/* STT: Training-UI — scrollbare Sample-Liste                   */
/* ============================================================ */

.anybot-stt-samples-scroll {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Dezenter Schatten signalisiert Scrollbarkeit */
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 6px;
    padding: 4px 6px;
    margin-top: 6px;
    background: #fafafa;
}

.anybot-stt-samples-scroll:empty {
    display: none;
}


/* ============================================================ */
/* STT: Training-UI — Aktions-Zeile (Record + Speichern)        */
/* ============================================================ */

.anybot-stt-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.anybot-stt-action-row .btn {
    flex-shrink: 0;
}


/* ============================================================ */
/* STT: Training-UI — Status-Zeile unterhalb der Buttons        */
/* ============================================================ */

.anybot-stt-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    min-height: 18px;
}

.anybot-stt-status-row .anybot-stt-record-hint {
    font-size: 12px;
    color: #666;
    flex: 1;
}

.anybot-stt-status-row .anybot-stt-sample-count {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}


/* ============================================================ */
/* STT: Sample #1 — Anker-Badge (kein Löschen wenn n > 1)      */
/* ============================================================ */

.anybot-stt-ref-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: rgba(7,142,141,0.10);
    color: var(--color-primary-ab, #078e8d);
    font-size: 12px;
    cursor: help;
    flex-shrink: 0;
    border: 1px solid rgba(7,142,141,0.20);
}


/* ============================================================ */
/* TEXTAREA-WRAPPER: form-floating-Technik (Bootstrap-Prinzip) */
/* Wichtig: min-width:0 verhindert Flex-Overflow → Splitter OK  */
/* ============================================================ */

.anybot-textarea-wrapper {
    position: relative;   /* Kontext für position:absolute Label */
    flex: 1;
    min-width: 0;         /* KRITISCH: verhindert dass Wrapper den Flex überdehnt */
    overflow: visible;    /* Label darf den Border überlappen */
}

/* Textarea nimmt volle Breite des Wrappers */
.anybot-textarea-wrapper .anybot-user-input {
    width: 100%;
    display: block;
}

/* Extra Top-Padding wenn Caption aktiv */
.anybot-user-input-captioned {
    padding-top: 20px !important;
}


/* ============================================================ */
/* STT-CAPTION: sitzt auf dem oberen Border der Textarea         */
/* Genau wie Bootstrap form-floating:                           */
/*   - position:absolute im relativen Wrapper                   */
/*   - top negativ → Mitte des Labels sitzt auf Border-Linie    */
/*   - background:white schneidet den Border optisch durch       */
/* ============================================================ */

.anybot-stt-caption {
    position: absolute;
    /* top: -0.6em; */               /* Mitte des Labels auf der oberen Border-Linie */
    top: 0.2em;
    left: 12px;                /* Etwas eingerückt (wie Bootstrap legend) */
    right: 0;
    background: transparent;
    font-size: 11px;
    line-height: 1.2em;
    font-weight: 500;
    color: var(--color-secondary-text-ab, #888);
    z-index: 4;
    cursor: text;              /* Klick aktiviert die Textarea (for="...") */
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Weißes Background-Rechteck nur hinter dem Text (nicht über die volle Breite) */
    padding: 0 5px 0 0;
}

/* Trennzeichen */
.anybot-stt-caption .anybot-stt-info-sep,
.anybot-stt-caption .anybot-stt-cap-sep {
    color: #ccc;
    font-size: 10px;
    flex-shrink: 0;
}

/* Status-Span: Farbe per JS */
#anybot-stt-status- { color: #aaa; }

/* ==========================================
   KONTEXT-INDIKATOR
   Zeigt geschätzte verbleibende History-Kapazität im Chat-Headline-Bereich.
   ========================================== */

/* Container: via margin-left:auto an den rechten Rand schieben */
.splitter-content-headline-middle .anybot-ctx-indicator {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	margin-left:     auto;
	margin-right:    16px;
	flex-shrink:     0;
	cursor:          default;
	user-select:     none;
	/* Headline-Übersteuerung: eigenes Styling, nicht vom span-Catch-All */
	font-size:       unset;
	font-weight:     unset;
	letter-spacing:  unset;
	text-transform:  unset;
}

/* Fortschrittsbalken-Hintergrund */
.splitter-content-headline-middle .anybot-ctx-bar {
	display:       inline-block;
	width:         52px;
	height:        5px;
	background:    rgba(128,128,128,0.25);
	border-radius: 3px;
	overflow:      hidden;
	flex-shrink:   0;
}

/* Füllstand (Breite wird per JS gesetzt) */
.splitter-content-headline-middle .anybot-ctx-fill {
	display:          block;
	height:           100%;
	width:            0%;
	border-radius:    3px;
	transition:       width 0.5s ease, background-color 0.5s ease;
}

/* Prozent-Text */
.splitter-content-headline-middle .anybot-ctx-pct {
	font-size:      10px;
	font-weight:    700;
	letter-spacing: 0.04em;
	min-width:      30px;
	text-align:     right;
	opacity:        0.85;
	line-height:    1;
}

/* Farb-States */
.anybot-ctx--ok   .anybot-ctx-fill { background-color: #28a745; }
.anybot-ctx--warn .anybot-ctx-fill { background-color: #fd7e14; }
.anybot-ctx--crit .anybot-ctx-fill { background-color: #dc3545; }

.anybot-ctx--ok   .anybot-ctx-pct  { color: #28a745; }
.anybot-ctx--warn .anybot-ctx-pct  { color: #fd7e14; }
.anybot-ctx--crit .anybot-ctx-pct  { color: #dc3545; }

/* Auf sehr kleinen Screens den Balken weglassen, nur % zeigen */
@media (max-width: 480px) {
	.splitter-content-headline-middle .anybot-ctx-bar {
		display: none;
	}
}