/* ═══════════════════════════════════════════════════════════════════════════
   pc-botui – Modern Chat Workbench Component with DevTools-style Docking
   A "soft futuristic" IDE-like chat interface
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS Variables – Dark Theme (Default) – VS Code / Monokai inspired (like Tickets)
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui {
	--botui-bg: #1e1e1e;
	--botui-bg-secondary: #252526;
	--botui-bg-tertiary: #2d2d30;
	--botui-text: #f0f0f0;
	--botui-text-muted: #9cdcfe;
	--botui-accent: #0e639c;
	--botui-accent-hover: #1177bb;
	--botui-accent-glow: rgba(14, 99, 156, 0.35);
	--botui-user-bg: var(--rd-primary-active, #d66181);
	--botui-user-text: #fff;
	--botui-border: #3e3e42;
	--botui-transition: 180ms ease-out;
	--botui-radius: var(--rd-borderradius-border-big);
	--botui-radius-sm: var(--rd-borderradius-border-md);
	--botui-radius-xs: var(--rd-borderradius-border-sm);
	--botui-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
	--botui-resizer-size: 6px;

	display: block;
	font-family: var(--rd-font-family, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--botui-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CSS Variables – Light Theme (GitHub-inspired, like Ticket System)
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-container[data-theme="light"] {
	/* Backgrounds - GitHub Light inspired */
	--botui-bg: #ffffff;
	--botui-bg-secondary: #f6f8fa;
	--botui-bg-tertiary: var(--rd-base-fg-bg);

	/* Text colors - high contrast */
	--botui-text: #1f2328;
	--botui-text-muted: #656d76;

	/* Accent colors - refined for light theme */
	--botui-accent: #0969da;
	--botui-accent-hover: #0550ae;
	--botui-accent-glow: rgba(9, 105, 218, 0.12);

	/* Border - visible but subtle */
	--botui-border: #d0d7de;
	--botui-shadow: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);

	/* User message - softer blue instead of CTA pink */
	--botui-user-bg: #0969da;
	--botui-user-text: #ffffff;

	/* Bot message - clean light background */
	--botui-bot-bg: #f6f8fa;
	--botui-bot-border: #d0d7de;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Container – Dock Mode Positioning
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-container {
	display: flex;
	background: var(--botui-bg);
	color: var(--botui-text);
	overflow: hidden;
}

/* Inline mode (embedded in document flow) */
pc-botui .botui-container[data-dock-mode="inline"] {
	width: 100%;
	height: 100%;
	flex-direction: column;
}

/* Docked modes – fixed positioning */
pc-botui .botui-container[data-dock-mode="right"],
pc-botui .botui-container[data-dock-mode="left"],
pc-botui .botui-container[data-dock-mode="top"],
pc-botui .botui-container[data-dock-mode="bottom"],
pc-botui .botui-container[data-dock-mode="fullscreen"] {
	position: fixed;
	z-index: 999;
	box-shadow: var(--botui-shadow);
	box-sizing: border-box;
	/* Ensure padding is included in dimensions */
}

/* Fullscreen mode: above the page header (z-index: 500) so it covers everything */
pc-botui .botui-container[data-dock-mode="fullscreen"] {
	z-index: 501;
}

pc-botui .botui-container[data-dock-mode="right"] {
	top: 0;
	right: 0;
	height: 100vh;
	flex-direction: row;
}

pc-botui .botui-container[data-dock-mode="left"] {
	top: 0;
	left: 0;
	height: 100vh;
	flex-direction: row-reverse;
}

pc-botui .botui-container[data-dock-mode="bottom"] {
	bottom: 0;
	left: 0;
	width: 100vw;
	flex-direction: column;
}

pc-botui .botui-container[data-dock-mode="top"] {
	top: 0;
	left: 0;
	width: 100vw;
	flex-direction: column-reverse;
}

pc-botui .botui-container[data-dock-mode="fullscreen"] {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	flex-direction: column;
}

/* The main panel inside container */
pc-botui .botui-panel {
	position: relative;
	/* For absolute positioning of dock resizer */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dock Edge Resizer
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-dock-resizer {
	position: absolute;
	background: var(--botui-bg-tertiary);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--botui-transition);
	z-index: 10;
}

pc-botui .botui-dock-resizer:hover {
	background: var(--botui-accent-glow);
}

/* Vertical resizer (for left/right docking) - positioned at edge of panel */
pc-botui .botui-dock-resizer-v {
	width: var(--botui-resizer-size);
	top: 0;
	bottom: 0;
	cursor: ew-resize;
}

/* Horizontal resizer (for top/bottom docking) - positioned at edge of panel */
pc-botui .botui-dock-resizer-h {
	height: var(--botui-resizer-size);
	left: 0;
	right: 0;
	cursor: ns-resize;
}

/* Right dock: resizer on left edge of panel */
pc-botui .botui-container[data-dock-mode="right"] .botui-dock-resizer-v {
	left: 0;
}

/* Left dock: resizer on right edge of panel */
pc-botui .botui-container[data-dock-mode="left"] .botui-dock-resizer-v {
	right: 0;
}

/* Top dock: resizer on bottom edge of panel */
pc-botui .botui-container[data-dock-mode="top"] .botui-dock-resizer-h {
	bottom: 0;
}

/* Bottom dock: resizer on top edge of panel */
pc-botui .botui-container[data-dock-mode="bottom"] .botui-dock-resizer-h {
	top: 0;
}

pc-botui .botui-dock-resizer-handle {
	background: var(--botui-border);
	border-radius: 2px;
	transition: background var(--botui-transition);
}

pc-botui .botui-dock-resizer-v .botui-dock-resizer-handle {
	width: 3px;
	height: 40px;
}

pc-botui .botui-dock-resizer-h .botui-dock-resizer-handle {
	width: 40px;
	height: 3px;
}

pc-botui .botui-dock-resizer:hover .botui-dock-resizer-handle {
	background: var(--botui-accent);
}

/* Body class during dock resizing */
body.botui-resizing-dock {
	cursor: ew-resize !important;
	user-select: none !important;
}

body.botui-resizing-dock * {
	cursor: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Header
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--botui-bg-secondary);
	border-bottom: 1px solid var(--botui-border);
	flex-shrink: 0;
}

pc-botui .botui-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

pc-botui .botui-title-icon {
	width: 24px;
	height: 24px;
	background-image: url("/src/img/2024/svg/icons/rd-zauberstab-verlauf.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

pc-botui .botui-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--rd-primary-active, #d66181);
}

pc-botui .botui-status {
	font-size: 12px;
	color: var(--botui-text-muted);
	padding: 4px 10px;
	background: var(--botui-bg-tertiary);
	border-radius: 20px;
	transition: var(--botui-transition);
}

pc-botui .botui-status-active {
	color: var(--botui-accent);
	background: var(--botui-accent-glow);
}

pc-botui .botui-status-icon {
	font-size: 14px;
	margin-right: 4px;
	vertical-align: middle;
	animation: botui-pulse 1.5s ease-in-out infinite;
}

pc-botui .botui-debug-badge {
	font-family: var(--botui-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 11px;
	color: var(--botui-text-muted);
	padding: 3px 8px;
	background: var(--botui-bg-tertiary);
	border: 1px dashed var(--botui-border, rgba(128, 128, 128, 0.35));
	border-radius: 10px;
	cursor: pointer;
	white-space: nowrap;
	transition: var(--botui-transition);
}

pc-botui .botui-debug-badge:hover {
	color: var(--botui-text);
	border-style: solid;
}

pc-botui .botui-debug-badge-copied {
	color: var(--botui-accent, #4caf50);
	border-color: var(--botui-accent, #4caf50);
	border-style: solid;
}

@keyframes botui-pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

pc-botui .botui-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Bot Selector – Shown when multiple bots available
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-bot-selector {
	display: flex;
	align-items: center;
}

pc-botui .botui-bot-select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--botui-bg-tertiary);
	border: 1px solid var(--botui-border);
	border-radius: var(--botui-radius-sm);
	color: var(--botui-text);
	font-size: 13px;
	padding: 6px 28px 6px 10px;
	cursor: pointer;
	transition: var(--botui-transition);
	max-width: 160px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	/* Custom dropdown arrow – high contrast cyan (#9cdcfe) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%239cdcfe'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
}

pc-botui .botui-bot-select:hover {
	background-color: var(--botui-accent-glow);
	border-color: var(--botui-accent);
}

pc-botui .botui-bot-select:focus {
	outline: none;
	border-color: var(--botui-accent);
	box-shadow: 0 0 0 2px var(--botui-accent-glow);
}

pc-botui .botui-bot-select option {
	background: var(--botui-bg);
	color: var(--botui-text);
	padding: 8px;
}

/* Light theme adjustments for bot selector */
pc-botui .botui-container[data-theme="light"] .botui-bot-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23656d76'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════════
   Light Theme Overrides – Improved Contrast (GitHub-inspired)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header buttons in light theme - pink CTA color */
pc-botui .botui-container[data-theme="light"] .botui-theme-toggle,
pc-botui .botui-container[data-theme="light"] .botui-settings-btn,
pc-botui .botui-container[data-theme="light"] .botui-close-btn,
pc-botui .botui-container[data-theme="light"] .botui-fullscreen-toggle,
pc-botui .botui-container[data-theme="light"] .botui-rebuild-btn,
pc-botui .botui-container[data-theme="light"] .botui-new-chat-btn {
	color: var(--rd-primary-active, #d66181);
	background: transparent;
	border: none;
}

pc-botui .botui-container[data-theme="light"] .botui-theme-toggle:hover,
pc-botui .botui-container[data-theme="light"] .botui-settings-btn:hover,
pc-botui .botui-container[data-theme="light"] .botui-fullscreen-toggle:hover,
pc-botui .botui-container[data-theme="light"] .botui-close-btn:hover,
pc-botui .botui-container[data-theme="light"] .botui-rebuild-btn:hover:not(:disabled),
pc-botui .botui-container[data-theme="light"] .botui-new-chat-btn:hover {
	color: var(--rd-primary-hover, #c75472);
	background: rgba(214, 97, 129, 0.08);
}

/* Bot selector in light theme */
pc-botui .botui-container[data-theme="light"] .botui-bot-select {
	color: #1f2328;
	background-color: #f6f8fa;
	border-color: #d0d7de;
}

pc-botui .botui-container[data-theme="light"] .botui-bot-select:hover {
	background-color: #eaeef2;
	border-color: #afb8c1;
}

pc-botui .botui-container[data-theme="light"] .botui-bot-select:focus {
	border-color: #0969da;
	box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
}

/* Status badge in light theme */
pc-botui .botui-container[data-theme="light"] .botui-status {
	color: #656d76;
	background: #eaeef2;
}

pc-botui .botui-container[data-theme="light"] .botui-status-active {
	color: #0550ae;
	background: #ddf4ff;
}

/* User message in light theme - light green (matches old campus bot) */
pc-botui .botui-container[data-theme="light"] .botui-message-user .botui-message-content {
	background: #e7f0d9;
	color: #1B240D;
}

/* Bot message in light theme - clean subtle background */
pc-botui .botui-container[data-theme="light"] .botui-message-assistant .botui-message-content {
	background: #f6f8fa;
	border-color: #d0d7de;
	color: #1f2328;
}

/* Input area in light theme */
pc-botui .botui-container[data-theme="light"] .botui-input-area {
	background: #f6f8fa;
	border-top-color: #d0d7de;
}

pc-botui .botui-container[data-theme="light"] .botui-input {
	background: #ffffff;
	border-color: #d0d7de;
	color: #1f2328;
}

pc-botui .botui-container[data-theme="light"] .botui-input:focus {
	border-color: #0969da;
	box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
}

pc-botui .botui-container[data-theme="light"] .botui-input::placeholder {
	color: #8b949e;
}

/* Send button in light theme - use primary pink CTA color */
pc-botui .botui-container[data-theme="light"] .botui-btn-send {
	background: var(--rd-primary-active, #d66181);
}

pc-botui .botui-container[data-theme="light"] .botui-btn-send:hover:not(:disabled) {
	background: var(--rd-primary-hover, #c75472);
}

/* Cancel button in light theme - use primary pink CTA color */
pc-botui .botui-container[data-theme="light"] .botui-btn-cancel {
	background: var(--rd-primary-active, #d66181);
}

pc-botui .botui-container[data-theme="light"] .botui-btn-cancel:hover {
	background: var(--rd-primary-hover, #c75472);
}

/* Settings menu in light theme */
pc-botui .botui-container[data-theme="light"] .botui-settings-menu {
	background: #ffffff;
	border-color: #d0d7de;
	box-shadow: 0 8px 24px rgba(66, 74, 83, 0.12);
}

pc-botui .botui-container[data-theme="light"] .botui-settings-item:hover {
	background: #f6f8fa;
}

pc-botui .botui-container[data-theme="light"] .botui-settings-item.active {
	background: #ddf4ff;
	color: #0550ae;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--botui-radius-sm);
	cursor: pointer;
	transition: var(--botui-transition);
	font-size: 14px;
}

pc-botui .botui-theme-toggle {
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	font-size: 18px;
	color: var(--rd-primary-active, #d66181);
}

pc-botui .botui-theme-toggle:hover {
	color: var(--rd-primary-hover, #c75472);
	background: rgba(214, 97, 129, 0.1);
	border-radius: var(--botui-radius-sm);
}

/* Rebuild Button (debug mode — instruction staleness indicator) */
pc-botui .botui-rebuild-wrap {
	position: relative;
	display: inline-flex;
}

pc-botui .botui-rebuild-btn {
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	font-size: 18px;
	color: var(--rd-primary-active, #d66181);
	position: relative;
}

pc-botui .botui-rebuild-btn:hover:not(:disabled) {
	color: var(--rd-primary-hover, #c75472);
	background: rgba(214, 97, 129, 0.1);
	border-radius: var(--botui-radius-sm);
}

pc-botui .botui-rebuild-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

pc-botui .botui-rebuild-badge {
	position: absolute;
	top: 1px;
	right: 0;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: #e53e3e;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	pointer-events: none;
}

pc-botui .botui-rebuild-active {
	display: flex;
	align-items: center;
	gap: 4px;
	width: auto;
	padding: 0 8px;
}

pc-botui .botui-rebuild-progress {
	font-size: 11px;
	font-weight: 600;
	color: var(--rd-primary-active, #d66181);
	white-space: nowrap;
}

@keyframes botui-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

pc-botui .botui-rebuild-spinning {
	animation: botui-spin 1s linear infinite;
}

/* New Chat Button – ghost style */
pc-botui .botui-new-chat-btn {
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	font-size: 18px;
	color: var(--rd-primary-active, #d66181);
}

pc-botui .botui-new-chat-btn:hover {
	color: var(--rd-primary-hover, #c75472);
	background: rgba(214, 97, 129, 0.1);
	border-radius: var(--botui-radius-sm);
}

pc-botui .botui-new-chat-btn .material-icons {
	font-size: 20px;
}

/* Fullscreen Toggle Button – ghost style */
pc-botui .botui-fullscreen-toggle {
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	font-size: 18px;
	color: var(--rd-primary-active, #d66181);
}

pc-botui .botui-fullscreen-toggle:hover {
	color: var(--rd-primary-hover, #c75472);
	background: rgba(214, 97, 129, 0.1);
	border-radius: var(--botui-radius-sm);
}

/* Fullscreen icon using mask-based SVG (like PcDynamicSidebar) */
pc-botui .botui-fullscreen-toggle .botui-fullscreen-icon {
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-position: center;
	-webkit-mask-position: center;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

pc-botui .botui-fullscreen-toggle .botui-fullscreen-icon.enable-fullscreen {
	mask-image: url("/src/img/2024/svg/icons/rd-enable-fullscreen.svg");
	-webkit-mask-image: url("/src/img/2024/svg/icons/rd-enable-fullscreen.svg");
}

pc-botui .botui-fullscreen-toggle .botui-fullscreen-icon.disable-fullscreen {
	mask-image: url("/src/img/2024/svg/icons/rd-disable-fullscreen.svg");
	-webkit-mask-image: url("/src/img/2024/svg/icons/rd-disable-fullscreen.svg");
}

pc-botui .botui-btn-send {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--botui-accent);
	color: #fff;
	font-size: 16px;
}

pc-botui .botui-btn-send:hover:not(:disabled) {
	background: var(--botui-accent-hover);
	box-shadow: 0 0 12px var(--botui-accent-glow);
}

pc-botui .botui-btn-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

pc-botui .botui-btn-cancel {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #dc3545;
	color: #fff;
	font-size: 16px;
}

pc-botui .botui-btn-cancel:hover {
	background: #c82333;
}

/* Settings Button */
pc-botui .botui-settings-wrap {
	position: relative;
}

pc-botui .botui-settings-btn {
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	font-size: 16px;
	color: var(--rd-primary-active, #d66181);
}

pc-botui .botui-settings-btn:hover {
	color: var(--rd-primary-hover, #c75472);
	background: rgba(214, 97, 129, 0.1);
	border-radius: var(--botui-radius-sm);
}

/* Close Button */
pc-botui .botui-close-btn {
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	font-size: 16px;
	color: var(--rd-primary-active, #d66181);
}

pc-botui .botui-close-btn .material-icons {
	font-weight: 700;
	font-size: 20px;
}

pc-botui .botui-close-btn:hover {
	color: var(--rd-primary-hover, #c75472);
	background: rgba(214, 97, 129, 0.08);
	border-radius: var(--botui-radius-sm);
}

/* Settings Menu */
pc-botui .botui-settings-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	min-width: 200px;
	background: var(--botui-bg-secondary);
	border: 1px solid var(--botui-border);
	border-radius: var(--botui-radius);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	z-index: 100;
	overflow: hidden;
	animation: botui-menu-in 150ms ease-out;
}

@keyframes botui-menu-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

pc-botui .botui-settings-section {
	padding: 8px;
}

pc-botui .botui-settings-section-divider {
	border-top: 1px solid var(--botui-border);
	margin-top: 4px;
	padding-top: 4px;
}

pc-botui .botui-settings-section-title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--botui-text-muted);
	padding: 8px 12px 4px;
	letter-spacing: 0.5px;
}

pc-botui .botui-settings-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	background: transparent;
	border: none;
	border-radius: var(--botui-radius-sm);
	color: var(--botui-text);
	cursor: pointer;
	transition: background var(--botui-transition);
	text-align: left;
	font-size: 13px;
}

pc-botui .botui-settings-item:hover {
	background: var(--botui-bg-tertiary);
}

pc-botui .botui-settings-item.active {
	background: var(--botui-accent-glow);
	color: var(--botui-accent);
}

pc-botui .botui-settings-item-icon {
	font-size: 16px;
	width: 20px;
	text-align: center;
}

pc-botui .botui-settings-item-label {
	flex: 1;
}

pc-botui .botui-settings-item-check {
	color: var(--botui-accent);
	font-size: 14px;
}

pc-botui .botui-settings-item:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

pc-botui .botui-settings-item:disabled:hover {
	background: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Body (Split Layout)
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-body {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Chat Area
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-chat {
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: flex var(--botui-transition);
}

pc-botui .botui-messages {
	flex: 1;
	overflow-y: auto;
	margin: 0 var(--rd-spacing-md) var(--rd-spacing-md) var(--rd-spacing-md);
	display: flex;
	flex-direction: column;
	gap: 12px;
	}

/* Custom scrollbar for dark theme */
pc-botui .botui-container[data-theme="dark"] .botui-messages::-webkit-scrollbar {
	width: 8px;
}

pc-botui .botui-container[data-theme="dark"] .botui-messages::-webkit-scrollbar-track {
	background: var(--botui-bg-tertiary);
	border-radius: 4px;
}

pc-botui .botui-container[data-theme="dark"] .botui-messages::-webkit-scrollbar-thumb {
	background: var(--botui-border);
	border-radius: 4px;
}

pc-botui .botui-container[data-theme="dark"] .botui-messages::-webkit-scrollbar-thumb:hover {
	background: var(--botui-text-muted);
}

/* Empty state - Intro screen */
pc-botui .botui-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 20px;
}

/* AI Search pending busy state (replaces mascot when waiting for summary) */
pc-botui .botui-intro-pending {
	gap: 16px;
}

pc-botui .botui-search-spinner {
	width: 32px;
	height: 32px;
	animation: botui-pulse 1.5s ease-in-out infinite;
}

pc-botui .botui-search-pending-label {
	color: var(--botui-text-muted);
	font-size: 14px;
	font-style: italic;
}

pc-botui .botui-intro-animation {
	display: flex;
	justify-content: center;
	max-width: 275px;
	max-height: 170px;
	/* No overflow:hidden – the Lottie intro segment (time="517,815") swings the
	   mascot in from outside the 275x170 box. Clipping it here made the animation
	   look broken ("zerschossen"). The standalone preview page has no clipping
	   wrapper, which is why it looked clean. */
	overflow: visible;
}

pc-botui .botui-intro-animation pc-rive-animation,
pc-botui .botui-intro-animation canvas {
	max-width: 275px;
	max-height: 170px;
}

pc-botui .botui-intro-greeting {
	color: var(--rd-primary-active);
	font-size: var(--rd-fontsize-6);
	text-align: center;
	font-weight: var(--rd-fontweights-open-sans-0);
	margin-bottom: var(--rd-spacing-lg);
	margin-top: var(--rd-spacing-md);
	white-space: pre-line;
	min-height: 81px;
}

pc-botui .botui-intro-suggestions {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 10px;
	justify-content: center;
	padding: 0 12px;
}

pc-botui .botui-intro-suggestion {
	background-color: rgb(240, 244, 249);
	color: var(--rd-secondary-active);
	padding: 12px 16px;
	border-radius: 20px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	text-decoration: none;
	font-size: var(--rd-fontsize-3);
	width: auto;
	max-width: none;
	flex: 1 1 auto;
	min-width: 120px;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
	transition: opacity 0.3s ease, background-color 0.2s ease;
}

pc-botui .botui-intro-suggestion.visible {
	opacity: 1;
}

pc-botui .botui-intro-suggestion:hover {
	background-color: rgb(225, 232, 240);
	text-decoration: none;
}

/* Responsive: stack suggestions in narrow containers */
@container (max-width: 420px) {
	pc-botui .botui-intro-suggestion {
		width: 100%;
		max-width: 100%;
	}
}

/* In docked modes, show suggestions side-by-side with flexible sizing */
pc-botui[dock-mode="right"] .botui-intro-suggestions,
pc-botui[dock-mode="left"] .botui-intro-suggestions {
	flex-wrap: wrap;
	flex-direction: row;
}

pc-botui[dock-mode="right"] .botui-intro-suggestion,
pc-botui[dock-mode="left"] .botui-intro-suggestion {
	width: auto;
	max-width: none;
	flex: 1 1 auto;
	min-width: 120px;
	height: auto;
	padding: 12px 16px;
}

/* Legacy empty state (kept as fallback) */
pc-botui .botui-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	color: var(--botui-text-muted);
}

pc-botui .botui-empty-icon {
	font-size: 48px;
	margin-bottom: 12px;
	opacity: 0.5;
}

pc-botui .botui-empty-text {
	font-size: 14px;
}

pc-botui .botui-empty-hint {
	font-size: 12px;
	opacity: 0.7;
	margin-top: 4px;
}

/* Loading state */
pc-botui .botui-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	gap: 12px;
	color: var(--botui-text-muted);
}

pc-botui .botui-loading .rd-spinner {
	width: 24px;
	height: 24px;
}

/* Error state */
pc-botui .botui-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	gap: 12px;
	color: var(--botui-text-muted);
	padding: 20px;
	text-align: center;
}

pc-botui .botui-error .material-icons {
	font-size: 36px;
	color: var(--botui-warning, #f0ad4e);
}

pc-botui .botui-btn-retry {
	margin-top: 8px;
	padding: 8px 16px;
	background: var(--botui-accent);
	color: #fff;
	border: none;
	border-radius: var(--botui-radius-sm);
	cursor: pointer;
	transition: var(--botui-transition);
}

pc-botui .botui-btn-retry:hover {
	background: var(--botui-accent-hover);
}

/* Thinking/processing indicator inside message */
pc-botui .botui-thinking {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--botui-text-muted);
	font-style: italic;
}

pc-botui .botui-thinking .rd-spinner {
	width: 16px;
	height: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Messages
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-message {
	width: 100%;
	animation: botui-message-in 200ms ease-out;
}

@keyframes botui-message-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

pc-botui .botui-message-user {
	align-self: flex-end;
}

/* User message row: avatar + bubble side by side */
pc-botui .botui-message-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

pc-botui .botui-message-body {
	width: 100%;
	/* allow text wrapping inside flex child */
}

/* User avatar — reuses existing lh_avatar/learn_avatar/learn_frame styles */
pc-botui .botui-user-avatar {
	flex-shrink: 0;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 6px;
}

pc-botui .botui-user-avatar .learn_avatar {
	position: absolute;
	left: -8px;
	top: -8px;
	right: -8px;
	bottom: -8px;
	background-size: cover;
	z-index: 1;
}

pc-botui .botui-user-avatar .learn_frame {
	position: absolute;
	left: -6px;
	top: -6px;
	right: -6px;
	bottom: -6px;
	background-size: cover;
	z-index: 2;
}

pc-botui .botui-message-assistant {
	align-self: flex-start;
}

pc-botui .botui-message-content {
	padding: 12px 16px;
	border-radius: var(--botui-radius);
	line-height: 1.5;
	font-size: var(--rd-fontsize-4);
	/* 14px — matches CampusBotApp */
	text-align: left;
}

pc-botui .botui-container[data-large-font] .botui-message-content {
	font-size: var(--rd-fontsize-5);
	/* 16px */
}

pc-botui .botui-message-user .botui-message-content {
	background: var(--botui-user-bg);
	color: var(--botui-user-text);
	border-bottom-right-radius: 4px;
}

pc-botui .botui-message-assistant .botui-message-content {
	background: var(--botui-bg-secondary);
	border: 1px solid var(--botui-border);
	border-bottom-left-radius: 4px;
}

pc-botui .botui-message-meta {
	display: flex;
	gap: 8px;
	margin-top: 4px;
	font-size: 11px;
	color: var(--botui-text-muted);
}

pc-botui .botui-message-user .botui-message-meta {
	justify-content: flex-end;
}

/* System messages (debug mode) */
pc-botui .botui-message-system .botui-message-content {
	background: var(--botui-bg-tertiary);
	border: 1px dashed var(--botui-border);
	font-family: var(--font-mono, monospace);
	font-size: 12px;
	color: var(--botui-text-muted);
	opacity: 0.9;
}

pc-botui .botui-message-system .botui-message-meta {
	justify-content: flex-start;
}

pc-botui .botui-message-system .botui-message-sender {
	color: var(--botui-warning, #f0ad4e);
	font-weight: 500;
}

/* Inspect button (debug mode) */
pc-botui .botui-inspect-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--botui-text-muted);
	cursor: pointer;
	border-radius: 3px;
	transition: var(--botui-transition);
}

pc-botui .botui-inspect-btn:hover {
	background: var(--botui-bg-tertiary);
	color: var(--botui-accent);
}

pc-botui .botui-inspect-btn .material-icons {
	font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Divider
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-divider {
	width: var(--rd-spacing-x-sm);
	background: var(--botui-bg-tertiary);
	cursor: ew-resize;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background var(--botui-transition);
	border-radius: var(--botui-radius-sm);
}

pc-botui .botui-divider-handle {
	width: 4px;
	height: 40px;
	background: var(--botui-bg-tertiary);
	border-radius: 2px;
	transition: var(--botui-transition);
}

pc-botui .botui-divider:hover .botui-divider-handle {
	background: var(--botui-border);
}

pc-botui.botui-dragging {
	cursor: ew-resize;
	user-select: none;
}

pc-botui.botui-dragging .botui-divider {
	background: var(--botui-accent-glow);
}

pc-botui.botui-dragging .botui-divider-handle,
pc-botui.botui-dragging .botui-divider:hover .botui-divider-handle {
	background: var(--botui-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Device Panel
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-devices {
	margin: 0 var(--rd-spacing-md) var(--rd-spacing-md) var(--rd-spacing-x-big);
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--botui-bg-tertiary);
	transition: flex var(--botui-transition);
	border-radius: var(--botui-radius);
}

pc-botui .botui-device-area {
	margin-top: -1px;
	border-radius: 0 0 var(--botui-radius) var(--botui-radius);
	border: 1px solid var(--botui-border);
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Device Content */
pc-botui .botui-device-content {
	flex: 1;
	overflow: auto;
	padding: var(--rd-spacing-md) 0;
	border-radius: var(--botui-radius);
	position: relative;
	z-index: 0;
}

/* ─── Grid Dashboard (replaces tabs) ─────────────────────────────────────────
   The device panels container is a CSS grid whose grid-template-areas is
   controlled by the copi-side Dashboard singleton device (agent-driven).
   Panels get a `grid-area` set imperatively by syncDevicePanels() based on
   dashboardState.areas[deviceId]. Panels with no area assignment fall into
   the implicit grid row below (auto-placed).
   Fallback: on empty template, malformed template, or mobile → stack vertically.
*/
pc-botui .botui-tab-panels {
	display: grid;
	gap: 12px;
	width: 100%;
	min-height: 100%;
	/* Rows size to their content — a one-line headline row stays one line
	   tall while a table row grows; without this, stretch distributes the
	   full height equally across rows (whitespace-heavy dashboards). */
	grid-auto-rows: auto;
	align-content: start;
	/* Don't stretch panels to the row height — a 350px chart next to an
	   80vh table keeps its natural height instead of becoming a mostly
	   empty card. */
	align-items: start;
}

pc-botui .botui-tab-panels.botui-stack-fallback {
	display: flex;
	flex-direction: column;
}

pc-botui .botui-tab-panel {
	min-width: 0;
	min-height: 0;
	/* Content-sized rows need an upper bound: a 200-row table would otherwise
	   blow its grid row up to tens of thousands of pixels. Beyond the cap the
	   panel scrolls internally. */
	max-height: 80vh;
	overflow: auto;
	border-radius: var(--botui-radius);
	background: var(--botui-bg);
	border: 1px solid var(--botui-border);
}

/* DataView panels need an explicitly bounded height: the row virtualizer
   inside PCTable requires a fixed scrollport to measure against. In a
   content-sized grid row it would otherwise mismeasure and inflate rows
   to fill its own scroll spacer (~26000px for 350 rows). */
pc-botui .botui-tab-panel > pc-data-view-device {
	display: block;
	height: 78vh;
}

/* Narrow panels: never compress a table column below readability — grow the
   rows uniformly and scroll horizontally instead. Without the floor, the
   width calc collapses flexible columns to ~1 character, text wraps
   letter-per-line and virtualized rows inflate to 1600px+. A fixed uniform
   row floor (not max-content) keeps columns vertically aligned across rows. */
pc-botui .botui-tab-panel .rd-sortable-table-row {
	min-width: 900px;
}
pc-botui .botui-tab-panel .rd-sortable-table-cell {
	min-width: 90px;
}

@media (max-width: 720px) {
	pc-botui .botui-tab-panels {
		display: flex !important;
		flex-direction: column;
	}
	pc-botui .botui-tab-panel {
		grid-area: unset !important;
	}
}

pc-botui .botui-device-wrapper {
	width: 100%;
	height: 100%;
	display: none;
	/* Hidden by default — devices in flat container are invisible */
}

pc-botui .botui-device-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--botui-text-muted);
	font-size: 14px;
}

/* All-devices flat container — holds all device elements, hidden by default */
pc-botui .botui-all-devices {
	display: none;
	/* Never directly visible — devices are moved to grid cells */
}

/* ─── Tab Grid Layout ─── */
pc-botui .botui-tab-grid {
	display: grid;
	gap: 12px;
	width: 100%;
	height: 100%;
	min-height: 0;
}

/* Cell base styles */
pc-botui .botui-cell {
	min-width: 0;
	min-height: 0;
	overflow: auto;
	border-radius: var(--botui-radius-sm);
}

/* Bot device cell — full-size container for the device element */
pc-botui .botui-cell-device {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	overflow: auto;
}

pc-botui .botui-cell-device>* {
	flex: 1;
	min-height: 0;
}

/* Placeholder cell — shown when a device is removed */
pc-botui .botui-cell-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 2px dashed var(--botui-border);
	border-radius: var(--botui-radius-sm);
	color: var(--botui-text-muted);
	font-size: 13px;
	opacity: 0.6;
}

pc-botui .botui-cell-placeholder .material-icons {
	font-size: 24px;
	opacity: 0.4;
}

/* Text cell */
pc-botui .botui-cell-text {
	display: flex;
	align-items: flex-start;
	padding: 12px 16px;
	color: var(--botui-text);
	font-size: 14px;
	line-height: 1.5;
}

pc-botui .botui-cell-text p {
	margin: 0;
}

/* Headline cell */
pc-botui .botui-cell-headline {
	display: flex;
	align-items: flex-end;
	padding: 8px 16px;
	color: var(--botui-text);
}

pc-botui .botui-cell-headline h2,
pc-botui .botui-cell-headline h3,
pc-botui .botui-cell-headline h4 {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
}

pc-botui .botui-cell-headline h2 {
	font-size: 20px;
}

pc-botui .botui-cell-headline h3 {
	font-size: 17px;
}

pc-botui .botui-cell-headline h4 {
	font-size: 15px;
}

/* KPI cell */
pc-botui .botui-cell-kpi {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 16px 12px;
	background: var(--botui-bg-secondary);
	border-radius: var(--botui-radius);
	border: 1px solid var(--botui-border);
	text-align: center;
}

pc-botui .botui-kpi-icon {
	font-size: 22px;
	color: var(--botui-accent);
	opacity: 0.8;
}

pc-botui .botui-kpi-value {
	font-size: 28px;
	font-weight: 700;
	color: var(--botui-text);
	line-height: 1.1;
}

pc-botui .botui-kpi-label {
	font-size: 12px;
	color: var(--botui-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

pc-botui .botui-kpi-trend {
	font-size: 18px;
}

pc-botui .botui-cell-kpi[data-trend="up"] .botui-kpi-trend {
	color: #22c55e;
}

pc-botui .botui-cell-kpi[data-trend="down"] .botui-kpi-trend {
	color: #ef4444;
}

pc-botui .botui-cell-kpi[data-trend="neutral"] .botui-kpi-trend {
	color: var(--botui-text-muted);
}

/* QueriesApp inside bot device: compact header — keep only the export button */
pc-botui .botui-device-wrapper pc-main-header .rd-main-header-wrap .rd-main-header,
pc-botui .botui-cell-device pc-main-header .rd-main-header-wrap .rd-main-header {
	padding: 4px 12px !important;
	min-height: 0 !important;
	background: transparent !important;
}

pc-botui .botui-device-wrapper pc-main-header .rd-main-header-wrap .rd-main-head-headline-wrap,
pc-botui .botui-device-wrapper pc-main-header .rd-main-head-subactions,
pc-botui .botui-cell-device pc-main-header .rd-main-header-wrap .rd-main-head-headline-wrap,
pc-botui .botui-cell-device pc-main-header .rd-main-head-subactions {
	display: none !important;
}

pc-botui .botui-device-wrapper .rd-sortable-table-resultcount-and-sorting,
pc-botui .botui-cell-device .rd-sortable-table-resultcount-and-sorting {
	margin: 4px 0 !important;
}

/* QueriesApp inside bot device: dark mode adaptation */
pc-botui .botui-device-wrapper .rd-filterbar,
pc-botui .botui-cell-device .rd-filterbar {
	margin: 0 !important;
}

pc-botui .botui-device-wrapper .rd-pctable .rd-sortable-table-row,
pc-botui .botui-cell-device .rd-pctable .rd-sortable-table-row {
	background: var(--botui-bg-secondary) !important;
	border-bottom: 1px solid var(--botui-border);
	margin-bottom: 0;
}

pc-botui .botui-device-wrapper .rd-pctable .rd-sortable-table-row:hover,
pc-botui .botui-cell-device .rd-pctable .rd-sortable-table-row:hover {
	background: var(--botui-bg-tertiary) !important;
}

pc-botui .botui-device-wrapper .rd-pctable .rd-sortable-table-row.rd-sortable-table-head,
pc-botui .botui-device-wrapper .rd-pctable .rd-sortable-table-row.rd-sortable-table-head:hover,
pc-botui .botui-cell-device .rd-pctable .rd-sortable-table-row.rd-sortable-table-head,
pc-botui .botui-cell-device .rd-pctable .rd-sortable-table-row.rd-sortable-table-head:hover {
	background: transparent !important;
	border-bottom: 1px solid var(--botui-border);
}

pc-botui .botui-device-wrapper .rd-pctable .rd-sortable-table-cell,
pc-botui .botui-cell-device .rd-pctable .rd-sortable-table-cell {
	color: var(--botui-text) !important;
}

pc-botui .botui-device-wrapper .rd-pctable .rd-sortable-table-head button,
pc-botui .botui-cell-device .rd-pctable .rd-sortable-table-head button {
	color: var(--botui-text-muted) !important;
}

pc-botui .botui-device-wrapper .rd-pctable [data-is-sort-column="true"] button,
pc-botui .botui-cell-device .rd-pctable [data-is-sort-column="true"] button {
	color: var(--botui-user-bg) !important;
}

pc-botui .botui-device-wrapper .rd-sortable-table-resultcount-and-sorting select,
pc-botui .botui-cell-device .rd-sortable-table-resultcount-and-sorting select {
	background: var(--botui-bg-tertiary);
	color: var(--botui-text);
	border: 1px solid var(--botui-border);
	border-radius: 4px;
}

pc-botui .botui-device-wrapper .rd-sortable-table-resultcount-and-sorting a,
pc-botui .botui-cell-device .rd-sortable-table-resultcount-and-sorting a {
	color: var(--botui-text-muted);
}

pc-botui .botui-device-wrapper .rd-queries-body,
pc-botui .botui-cell-device .rd-queries-body {
	padding-bottom: 16px !important;
}

pc-botui .botui-device-wrapper .rd-pctable .rd-sortable-table-row,
pc-botui .botui-cell-device .rd-pctable .rd-sortable-table-row {
	padding: 1px 12px;
}

pc-botui .botui-device-wrapper .rd-pctable .rd-paginator,
pc-botui .botui-cell-device .rd-pctable .rd-paginator {
	color: var(--botui-text-muted);
}

pc-botui .botui-device-wrapper .rd-pctable .rd-paginator a,
pc-botui .botui-cell-device .rd-pctable .rd-paginator a {
	color: var(--botui-text-muted);
}

pc-botui .botui-device-wrapper .rd-empty-data-not-found,
pc-botui .botui-cell-device .rd-empty-data-not-found {
	color: var(--botui-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Input Area
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-input {
	padding: 12px 16px;
	background: var(--botui-bg-secondary);
	border-top: 1px solid var(--botui-border);
	flex-shrink: 0;
}

/* Wand icon in the SuperInput inner-left zone (decorative) */
pc-botui .botui-input-wand-icon {
	width: 20px;
	height: 20px;
	min-width: 20px;
	background-image: url("/src/img/2024/svg/icons/rd-zauberstab-verlauf.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
	align-self: center;
	opacity: 0.6;
}

/* ── pc-super-input overrides for BotUI theming ─── */

pc-botui .botui-super-input .rd-super-input-field {
	border-color: var(--botui-border);
	background: var(--botui-bg);
	transition: border-color var(--botui-transition);
}

pc-botui .botui-super-input .rd-super-input-field:focus-within {
	border-color: var(--rd-primary-active, #d66181);
}

pc-botui .botui-super-input .rd-super-input-textarea,
pc-botui .botui-super-input .rd-super-input-input {
	color: var(--botui-text);
	font-size: 14px;
	padding: 6px 4px;
	min-height: 32px;
}

pc-botui .botui-super-input .rd-super-input-textarea::placeholder,
pc-botui .botui-super-input .rd-super-input-input::placeholder {
	color: var(--botui-text-muted);
}

pc-botui .botui-super-input .rd-super-input-textarea:disabled,
pc-botui .botui-super-input .rd-super-input-input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Action button colors for BotUI */
pc-botui .botui-super-input .rd-super-input-action-btn {
	color: var(--botui-text-muted);
}

pc-botui .botui-super-input .rd-super-input-action-btn:hover:not(:disabled) {
	color: var(--rd-primary-active, #d66181);
	background: rgba(0, 0, 0, 0.05);
}

/* Send button uses CampusBot pink */
pc-botui .botui-super-input .rd-super-input-send {
	background: var(--rd-primary-active, #d66181);
	color: #fff;
}

pc-botui .botui-super-input .rd-super-input-send:hover:not(:disabled) {
	background: var(--rd-primary-hover, #c7577b);
	box-shadow: 0 0 12px rgba(214, 97, 129, 0.3);
}

/* Mic idle state for BotUI */
pc-botui .botui-super-input .rd-super-input-mic.idle {
	background: transparent;
	color: var(--botui-text-muted);
}

pc-botui .botui-super-input .rd-super-input-mic.idle:hover:not(:disabled) {
	background: rgba(0, 0, 0, 0.05);
	color: var(--rd-primary-active, #d66181);
}

/* File upload button */
pc-botui .botui-super-input .rd-super-input-file-upload {
	color: var(--botui-text-muted);
}

pc-botui .botui-super-input .rd-super-input-file-upload:hover:not(:disabled) {
	color: var(--rd-primary-active, #d66181);
	background: rgba(0, 0, 0, 0.05);
}

/* File chips in BotUI */
pc-botui .botui-super-input .rd-super-input-file-chip {
	background: var(--botui-bg-secondary);
	color: var(--botui-text);
}

/* Busy/recording state gradients use botui bg */
pc-botui .botui-super-input .rd-super-input-root.busy .rd-super-input-field,
pc-botui .botui-super-input .rd-super-input-root.recording .rd-super-input-field {
	background: var(--botui-bg);
}

pc-botui .botui-input-footer {
	margin-top: 6px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding-left: 1em;
	padding-right: 1em;
}

pc-botui .botui-input-disclaimer {
	font-size: 11px;
	color: var(--botui-text-muted);
	line-height: 1.4;
	flex: 1;
	min-width: 0;
}

/* Full disclaimer on desktop, short on mobile */
pc-botui .botui-disclaimer-short {
	display: none;
}

pc-botui .botui-input-links {
	display: flex;
	gap: 16px;
	flex-shrink: 0;
}

pc-botui .botui-footer-link {
	font-size: 11px;
	color: var(--botui-accent);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--botui-transition);
}

pc-botui .botui-footer-link:hover {
	color: var(--botui-accent-hover);
	text-decoration: underline;
}

/* Light theme: use CampusBotApp-style link colors */
pc-botui .botui-container[data-theme="light"] .botui-footer-link {
	color: var(--rd-primary-active, #d66181);
}

pc-botui .botui-container[data-theme="light"] .botui-footer-link:hover {
	color: var(--rd-primary-hover, #c75472);
}

pc-botui .botui-input-hint {
	font-size: 11px;
	color: var(--botui-text-muted);
}

/* File upload - pc-files wrapper is visually hidden, only attach button is shown */
pc-botui .botui-ufiles {
	display: none !important;
}

pc-botui .botui-btn-upload {
	flex-shrink: 0;
	background: transparent;
	border: 1px solid var(--botui-border);
	border-radius: var(--botui-radius-sm);
	padding: 8px 10px;
	color: var(--botui-text-muted);
	cursor: pointer;
	transition: all var(--botui-transition);
}

pc-botui .botui-btn-upload:hover:not(:disabled) {
	border-color: var(--botui-accent);
	color: var(--botui-accent);
	background: rgba(var(--botui-accent-rgb), 0.1);
}

pc-botui .botui-btn-upload:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

pc-botui .botui-btn-upload .material-icons {
	font-size: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Content Layout Modes
   data-content-layout: chat | chat-devices | devices-chat | devices
   ═══════════════════════════════════════════════════════════════════════════ */

/* devices-chat: Reverse order – devices left, chat right */
pc-botui .botui-container[data-content-layout="devices-chat"] .botui-chat {
	order: 2;
}

pc-botui .botui-container[data-content-layout="devices-chat"] .botui-divider {
	order: 1;
}

pc-botui .botui-container[data-content-layout="devices-chat"] .botui-devices {
	order: 0;
}

/* Open Chat button (visible in devices-only mode) */
pc-botui .botui-open-chat-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

pc-botui .botui-open-chat-btn .material-icons {
	font-size: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile Tab Switcher
   ═══════════════════════════════════════════════════════════════════════════ */

pc-botui .botui-mobile-tab-switcher {
	display: none;
	/* Hidden by default, shown on mobile via media query */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Debug Mode Bot Message Sections – Ensure readable text in dark theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* SPEAKER section has light green background - needs dark text for contrast */
pc-botui .bot-speaker-content {
	color: #064e3b;
	/* dark green text on light green bg (#ecfdf5) */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive – Mobile Fullscreen with Virtual Keyboard Support
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

	/* Force fullscreen on mobile for all docked modes */
	pc-botui .botui-container[data-dock-mode="right"],
	pc-botui .botui-container[data-dock-mode="left"],
	pc-botui .botui-container[data-dock-mode="top"],
	pc-botui .botui-container[data-dock-mode="bottom"],
	pc-botui .botui-container[data-dock-mode="fullscreen"] {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		width: 100dvw !important;
		/* Dynamic viewport width */
		height: 100vh !important;
		height: 100dvh !important;
		/* Dynamic viewport height - adjusts with keyboard */
		max-width: 100% !important;
		max-height: 100% !important;
		z-index: 99999 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	/* Hide dock resizer on mobile - no need to resize */
	pc-botui .botui-dock-resizer {
		display: none !important;
	}

	/* Ensure panel fills container */
	pc-botui .botui-panel {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	/* Body takes remaining space with flex */
	pc-botui .botui-body {
		flex: 1;
		min-height: 0;
		flex-direction: column;
		overflow: hidden;
	}

	/* Chat area is scrollable and takes available space */
	pc-botui .botui-chat {
		flex: 1 !important;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	pc-botui .botui-messages {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* Smooth iOS scrolling */
	}

	/* Divider for device panel on mobile */
	pc-botui .botui-divider {
		width: 100%;
		height: 8px;
		cursor: row-resize;
	}

	pc-botui .botui-divider-handle {
		width: 40px;
		height: 4px;
	}

	/* Devices panel on mobile */
	pc-botui .botui-devices {
		flex: 0.4 !important;
		min-height: 150px;
		max-height: 40vh;
	}

	/* Mobile: hide divider when tab switcher is active (devices shown exclusively) */
	pc-botui .botui-container[data-content-layout="chat"] .botui-devices,
	pc-botui .botui-container[data-content-layout="devices"] .botui-chat {
		display: none !important;
	}

	/* Mobile: when devices tab is active, devices panel takes full space */
	pc-botui .botui-container[data-content-layout="devices"] .botui-devices {
		flex: 1 !important;
		max-height: none;
	}

	/* Mobile tab switcher */
	pc-botui .botui-mobile-tab-switcher {
		display: flex;
		width: 100%;
		border-top: 1px solid var(--botui-border);
		background: var(--botui-bg-secondary);
	}

	pc-botui .botui-mobile-tab {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 6px 8px;
		background: none;
		border: none;
		border-bottom: 2px solid transparent;
		color: var(--botui-text-muted);
		font-size: 12px;
		cursor: pointer;
		transition: var(--botui-transition);
	}

	pc-botui .botui-mobile-tab:hover {
		color: var(--botui-text);
		background: var(--botui-bg-tertiary);
	}

	pc-botui .botui-mobile-tab.active {
		color: var(--botui-accent);
		border-bottom-color: var(--botui-accent);
	}

	pc-botui .botui-mobile-tab .material-icons {
		font-size: 16px;
	}

	/* Mobile: hide divider always (tab switching replaces split view) */
	pc-botui .botui-divider {
		display: none !important;
	}

	/* Messages take more width on mobile */
	pc-botui .botui-message {
		max-width: 90%;
	}

	/* Input area stays at bottom - uses safe area insets for notch devices */
	pc-botui .botui-input {
		flex-shrink: 0;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		background: var(--botui-bg-secondary);
		/* Ensure it's positioned at the bottom */
		margin-top: auto;
	}

	/* Header uses safe area for notch on top */
	pc-botui .botui-header {
		padding-top: calc(12px + env(safe-area-inset-top, 0px));
		padding-left: calc(16px + env(safe-area-inset-left, 0px));
		padding-right: calc(16px + env(safe-area-inset-right, 0px));
	}

	/* Compact header on mobile */
	pc-botui .botui-header {
		padding: 8px 10px;
		padding-top: calc(8px + env(safe-area-inset-top, 0px));
		padding-left: calc(10px + env(safe-area-inset-left, 0px));
		padding-right: calc(10px + env(safe-area-inset-right, 0px));
		gap: 6px;
	}

	pc-botui .botui-header-left {
		gap: 6px;
	}

	pc-botui .botui-header-right {
		gap: 4px;
	}

	/* Hide "KI-Assistenz" title on mobile, keep wand icon */
	pc-botui .botui-title {
		display: none;
	}

	pc-botui .botui-title-icon {
		width: 20px;
		height: 20px;
	}

	pc-botui .botui-status {
		font-size: 11px;
		padding: 3px 8px;
	}

	pc-botui .botui-status:not(.botui-status-active) {
		display: none;
		/* Hide "Bereit" status to save space */
	}

	/* Hide fullscreen toggle on mobile - already fullscreen */
	pc-botui .botui-fullscreen-toggle {
		display: none;
	}

	/* Compact buttons on mobile */
	pc-botui .botui-btn {
		min-width: 32px;
		min-height: 32px;
	}

	pc-botui .botui-theme-toggle,
	pc-botui .botui-settings-btn,
	pc-botui .botui-close-btn {
		width: 32px;
		height: 32px;
	}

	pc-botui .botui-theme-toggle .material-icons,
	pc-botui .botui-settings-btn .material-icons,
	pc-botui .botui-close-btn .material-icons {
		font-size: 18px;
	}

	/* Bot selector more compact */
	pc-botui .botui-bot-select {
		font-size: 12px;
		padding: 5px 24px 5px 8px;
		max-width: 120px;
	}

	/* Messages area - tighter padding */
	pc-botui .botui-messages {
		padding: 10px;
		gap: 8px;
	}

	/* Smaller message bubbles */
	pc-botui .botui-message-content {
		padding: 8px 12px;
		font-size: 13px;
		line-height: 1.4;
	}

	pc-botui .botui-message-meta {
		font-size: 10px;
		margin-top: 3px;
	}

	/* Empty state smaller */
	pc-botui .botui-empty-icon {
		font-size: 36px;
		margin-bottom: 8px;
	}

	pc-botui .botui-empty-icon .material-icons {
		font-size: 36px;
	}

	pc-botui .botui-empty-text {
		font-size: 13px;
	}

	pc-botui .botui-empty-hint {
		font-size: 11px;
	}

	/* Intro screen responsive */
	pc-botui .botui-intro {
		padding: 12px;
	}

	pc-botui .botui-intro-greeting {
		font-size: var(--rd-fontsize-4);
		min-height: 60px;
	}

	pc-botui .botui-intro-suggestion {
		width: 100%;
		max-width: 100%;
	}

	/* Input area - tighter padding */
	pc-botui .botui-input {
		padding: 8px 10px;
		padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
	}

	pc-botui .botui-input-row {
		gap: 6px;
	}

	/* Hide wand icon on mobile to save space */
	pc-botui .botui-input-wand-icon {
		display: none;
	}

	/* Send/Cancel buttons - compact but touch accessible */
	pc-botui .botui-btn-send,
	pc-botui .botui-btn-cancel {
		width: 40px;
		height: 40px;
	}

	pc-botui .botui-btn-send .material-icons,
	pc-botui .botui-btn-cancel .material-icons {
		font-size: 20px;
	}

	/* Upload button compact */
	pc-botui .botui-btn-upload {
		padding: 6px 8px;
	}

	pc-botui .botui-btn-upload .material-icons {
		font-size: 18px;
	}

	/* Textarea for typing */
	pc-botui .botui-textarea {
		font-size: 16px;
		/* Prevents iOS zoom on focus */
		min-height: 40px;
		padding: 8px 10px;
	}

	/* Hide input hint to save space, show short disclaimer */
	pc-botui .botui-input-footer {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	pc-botui .botui-disclaimer-full {
		display: none;
	}

	pc-botui .botui-disclaimer-short {
		display: inline;
	}

	pc-botui .botui-input-links {
		gap: 12px;
	}

	/* Settings menu full width on mobile */
	pc-botui .botui-settings-menu {
		position: fixed;
		left: 12px;
		right: 12px;
		top: auto;
		bottom: 60px;
		width: auto;
		max-height: 60vh;
		overflow-y: auto;
	}

	pc-botui .botui-settings-item {
		padding: 8px 10px;
		font-size: 12px;
	}

	pc-botui .botui-settings-section-title {
		font-size: 10px;
		padding: 6px 10px 3px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Legacy Look – CampusBotApp-like Floating Panel Appearance
   For visual parity during migration from CampusBotApp to BotUI
   ═══════════════════════════════════════════════════════════════════════════ */

/* CSS Variables for Legacy Look */
pc-botui {
	/* Match CampusBotApp visual metrics (measured at runtime):
	   - top: below navbar (~90px) + a small gap = 103px
	   - bottom: 45px (CampusBotApp uses bottom: 45px on its container)
	   - dock-edge: 35px (CampusBotApp uses right: 20px + ~15px scrollbar offset = 35px visual) */
	--botui-legacy-padding-top: 105px;
	--botui-legacy-padding-bottom: 45px;
	--botui-legacy-padding-dock: 35px;
	--botui-legacy-radius: 32px;
}

/* Legacy Look Container – transparent background with padding for floating effect */
pc-botui .botui-container[data-legacy-look]:not([data-dock-mode="fullscreen"]):not([data-dock-mode="inline"]) {
	background: transparent;
	box-shadow: none;
	box-sizing: border-box;
	/* Ensure padding doesn't exceed viewport dimensions */
}

/* Panel gets the actual styling in legacy mode */
pc-botui .botui-container[data-legacy-look]:not([data-dock-mode="fullscreen"]):not([data-dock-mode="inline"]) .botui-panel {
	border-radius: var(--botui-legacy-radius);
	background: var(--botui-bg);
	/* Match CampusBotApp box-shadow */
	box-shadow: 0px 4px 6px -1px rgba(15, 15, 16, 0.08), 0px 2px 4px -1px rgba(15, 15, 16, 0.06);
	overflow: hidden;
}

/* Legacy Look: Header – transparent background, no border */
pc-botui .botui-container[data-legacy-look] .botui-header {
	background: transparent;
	border-bottom: none;
}

pc-botui .botui-container[data-legacy-look] .botui-status {
	display: none;
}

/* Legacy Look: Dock resizer – invisible by default, visible on hover */
pc-botui .botui-container[data-legacy-look] .botui-dock-resizer {
	background: transparent;
}

pc-botui .botui-container[data-legacy-look] .botui-dock-resizer .botui-dock-resizer-handle {
	background: transparent;
}

pc-botui .botui-container[data-legacy-look] .botui-dock-resizer:hover {
	background: rgba(0, 0, 0, 0.04);
}

pc-botui .botui-container[data-legacy-look] .botui-dock-resizer:hover .botui-dock-resizer-handle {
	background: var(--botui-border);
}

/* Legacy Look: Input area – transparent background, no border */
pc-botui .botui-container[data-legacy-look] .botui-input {
	background: transparent;
	border-top: none;
}

/* Right dock: free-left=0, dock-right=35px, top=103px, bottom=45px */
pc-botui .botui-container[data-legacy-look][data-dock-mode="right"] {
	top: var(--botui-legacy-padding-top);
	bottom: var(--botui-legacy-padding-bottom);
	right: var(--botui-legacy-padding-dock);
	height: calc(100vh - var(--botui-legacy-padding-top) - var(--botui-legacy-padding-bottom));
}

/* Left dock: dock-left=35px, free-right=0, top=103px, bottom=45px */
pc-botui .botui-container[data-legacy-look][data-dock-mode="left"] {
	top: var(--botui-legacy-padding-top);
	bottom: var(--botui-legacy-padding-bottom);
	left: var(--botui-legacy-padding-dock);
	height: calc(100vh - var(--botui-legacy-padding-top) - var(--botui-legacy-padding-bottom));
}

/* Top dock: dock-top=35px, sides=35px, free-bottom=0 */
pc-botui .botui-container[data-legacy-look][data-dock-mode="top"] {
	top: var(--botui-legacy-padding-top);
	left: 10vw;
	right: 10vw;
	height: 80vh;
	width: 80vw;
}

/* Bottom dock: free-top=0, sides=35px, dock-bottom=45px */
pc-botui .botui-container[data-legacy-look][data-dock-mode="bottom"] {
	bottom: var(--botui-legacy-padding-dock);
	left: 10vw;
	right: 10vw;
	height: 80vh;
	width: 80vw;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Virtual Keyboard Support – iOS and Modern Browsers
   Uses interactive-widget=resizes-content viewport behavior
   ═══════════════════════════════════════════════════════════════════════════ */

/* When keyboard is open, the dvh unit shrinks. This ensures content resizes */
@supports (height: 100dvh) {
	@media (max-width: 768px) {

		pc-botui .botui-container[data-dock-mode="right"],
		pc-botui .botui-container[data-dock-mode="left"],
		pc-botui .botui-container[data-dock-mode="top"],
		pc-botui .botui-container[data-dock-mode="bottom"],
		pc-botui .botui-container[data-dock-mode="fullscreen"] {
			height: 100dvh !important;
		}
	}
}

pc-botui pc-upsell-banner {
	margin: var(--rd-spacing-lg) var(--rd-spacing-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Skeleton Loading Placeholders
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes botui-skeleton-shimmer {
	0% {
		background-position: -400px 0;
	}

	100% {
		background-position: 400px 0;
	}
}

pc-botui .botui-skeleton-block {
	background: linear-gradient(90deg, var(--botui-bg-tertiary) 25%, var(--botui-bg-secondary) 50%, var(--botui-bg-tertiary) 75%);
	background-size: 800px 100%;
	animation: botui-skeleton-shimmer 1.8s ease-in-out infinite;
	border-radius: var(--botui-radius-sm);
}

/* ─── Left pane: Chat summary skeletons ─── */
pc-botui .botui-skeleton-chat {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 20px;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

pc-botui .botui-skeleton-chat-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

pc-botui .botui-skeleton-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex-shrink: 0;
}

pc-botui .botui-skeleton-chat-lines {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

pc-botui .botui-skeleton-line {
	height: 14px;
}

pc-botui .botui-skeleton-line.w100 {
	width: 100%;
}

pc-botui .botui-skeleton-line.w90 {
	width: 90%;
}

pc-botui .botui-skeleton-line.w80 {
	width: 80%;
}

pc-botui .botui-skeleton-line.w70 {
	width: 70%;
}

pc-botui .botui-skeleton-line.w60 {
	width: 60%;
}

pc-botui .botui-skeleton-line.w50 {
	width: 50%;
}

pc-botui .botui-skeleton-line.w40 {
	width: 40%;
}

pc-botui .botui-skeleton-chat .botui-search-pending-label {
	text-align: center;
	margin-top: 8px;
}

/* ─── Right pane: Search result card skeletons ─── */
pc-botui .botui-skeleton-results {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	overflow: hidden;
	background: var(--botui-bg-tertiary);
}

pc-botui .botui-skeleton-results-header {
	height: 18px;
	width: 120px;
	margin-bottom: 4px;
}

pc-botui .botui-skeleton-card {
	display: flex;
	gap: 12px;
	padding: 12px;
	border-radius: var(--botui-radius-sm);
	border: 1px solid var(--botui-border);
	background: var(--botui-bg);
}

pc-botui .botui-skeleton-card-thumb {
	width: var(--rd-spacing-xx-lg);
	height: 100%;
	border-radius: var(--botui-radius-xs);
	flex-shrink: 0;
}

pc-botui .botui-skeleton-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

pc-botui .botui-skeleton-card-title {
	height: 14px;
	width: 85%;
}

pc-botui .botui-skeleton-card-subtitle {
	height: 12px;
	width: 60%;
}

pc-botui .botui-skeleton-card-meta {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

pc-botui .botui-skeleton-card-badge {
	height: 10px;
	width: 50px;
	border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   iOS Safari specific fixes
   ═══════════════════════════════════════════════════════════════════════════ */

@supports (-webkit-touch-callout: none) {
	@media (max-width: 768px) {

		/* Prevent iOS overscroll bounce on the container */
		pc-botui .botui-container {
			overscroll-behavior: contain;
		}

		/* Ensure proper keyboard-avoiding behavior */
		pc-botui .botui-panel {
			/* Use dvh for proper keyboard avoidance */
			height: 100%;
			height: 100dvh;
		}
	}
}