/* ═══════════════════════════════════════════════════════════════════════════
   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);
	/* min-width is the real lever: a native <select> auto-sizes to the selected
	   option, so max-width alone leaves a short box. Force a consistently wide,
	   readable box; max-width caps the very longest labels. */
	min-width: 440px;
	max-width: 520px;
	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-y: auto;
	max-height: 75dvh;
	max-width: min(560px, calc(100vw - 32px));
	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-assistant .botui-message-content a[href^="#reply:"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: var(--rd-spacing-x-sm) var(--rd-spacing-x-sm) 0 0;
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-md);
	border: var(--rd-borderwidth-border-default) solid var(--rd-primary-inactive);
	border-radius: var(--rd-borderradius-border-xl);
	background: var(--rd-font-light);
	color: var(--rd-primary-inactive);
	text-decoration: none;
	cursor: default;
	pointer-events: none;
}

pc-botui .rd-botui-replies-active .botui-message-content a[href^="#reply:"] {
	border-color: var(--rd-primary-active);
	color: var(--rd-primary-active);
	cursor: pointer;
	pointer-events: auto;
}

pc-botui .rd-botui-replies-active .botui-message-content a[href^="#reply:"]:hover,
pc-botui .rd-botui-replies-active .botui-message-content a[href^="#reply:"]:focus {
	border-color: var(--rd-primary-hover);
	background: var(--rd-primary-hover);
	color: var(--rd-font-light);
}

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);
}

/* Per-answer feedback */
pc-botui .rd-botui-feedback {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-xx-sm);
	margin-top: var(--rd-spacing-x-sm);
}

pc-botui .botui-message-assistant:not(.rd-botui-latest-assistant) .rd-botui-feedback {
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease;
}

pc-botui .botui-message-assistant:not(.rd-botui-latest-assistant):hover .rd-botui-feedback,
pc-botui .botui-message-assistant:not(.rd-botui-latest-assistant):focus-within .rd-botui-feedback {
	opacity: 1;
	pointer-events: auto;
}

@media (hover: none) {
	pc-botui .botui-message-assistant:not(.rd-botui-latest-assistant) .rd-botui-feedback {
		opacity: 1;
		pointer-events: auto;
	}
}

pc-botui .rd-botui-feedback-rating {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rd-spacing-x-big);
	height: var(--rd-spacing-x-big);
	padding: 0;
	border: var(--rd-borderwidth-border-default) solid transparent;
	background: transparent;
	color: var(--botui-text-muted);
	cursor: pointer;
	border-radius: var(--rd-borderradius-border-md);
}

pc-botui .rd-botui-feedback-rating:hover {
	background: var(--botui-bg-tertiary);
	color: var(--rd-primary-active);
}

pc-botui .rd-botui-feedback-rating span {
	width: var(--rd-spacing-md);
	height: var(--rd-spacing-md);
}

pc-botui .rd-botui-feedback-rating .rd-icon-thumb-up::before,
pc-botui .rd-botui-feedback-rating .rd-icon-thumb-down::before {
	display: block;
	/* width: var(--rd-spacing-md);
	height: var(--rd-spacing-md); */
	margin-right: 0;
	background-color: var(--rd-gray-400);
}

pc-botui .rd-botui-feedback-rating:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.modal_dialog.rd-botui-feedback-dialog {
	width: min(600px, calc(100vw - var(--rd-spacing-md)));
	max-width: 600px;
}

.rd-botui-feedback-dialog > .rd-close_popup {
	position: absolute !important;
	top: var(--rd-spacing-x-big);
	right: var(--rd-spacing-x-big);
	margin-top: 0;
	z-index: 1;
}

.rd-botui-feedback-dialog .modal_dialog_top {
	height: 0;
	min-height: 0;
}

.rd-botui-feedback-dialog .modal_dialog_mid {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: var(--rd-spacing-x-sm) 0 0;
}

.rd-botui-feedback-dialog .modal_dialog_bottom {
	min-height: 0;
}

.rd-botui-feedback-dialog-content {
	color: var(--rd-font-dark);
}

.rd-botui-feedback-dialog-content h2 {
	margin: 0;
	color: var(--rd-font-dark);
	font-family: var(--rd-fontfamilies-open-sans);
	font-size: var(--rd-fontsize-8);
	font-style: normal;
	font-weight: var(--rd-fontweights-open-sans-1);
	line-height: 29px;
}

.rd-botui-feedback-modal-subtitle {
	margin: var(--rd-spacing-xx-sm) 0 var(--rd-spacing-x-big);
	color: var(--rd-font-dark);
	font-feature-settings: "liga" off;
	font-family: var(--rd-fontfamilies-open-sans);
	font-size: var(--rd-fontsize-5);
	font-style: normal;
	font-weight: var(--rd-fontweights-open-sans-2);
	line-height: 120%;
	letter-spacing: 0.16px;
}

.rd-botui-feedback-dialog .rd-botui-feedback-options {
	justify-content: flex-start;
	gap: var(--rd-spacing-sm);
	margin-bottom: var(--rd-spacing-lg);
	max-width: none;
}

.rd-botui-feedback-option-plus {
	display: inline-block;
	margin-right: var(--rd-spacing-x-sm);
}

.rd-botui-feedback-comment-label {
	display: block;
	margin-bottom: var(--rd-spacing-x-sm);
	color: var(--rd-font-dark);
	font-feature-settings: "liga" off;
	font-family: var(--rd-fontfamilies-open-sans);
	font-size: var(--rd-fontsize-4);
	font-style: normal;
	font-weight: var(--rd-fontweights-open-sans-0);
	line-height: 120%;
	letter-spacing: 0.14px;
}

.rd-botui-feedback-comment-label span {
	color: var(--rd-gray-500);
	font-feature-settings: "liga" off;
	font-family: var(--rd-fontfamilies-open-sans);
	font-size: var(--rd-fontsize-4);
	font-style: normal;
	font-weight: var(--rd-fontweights-open-sans-2);
	line-height: 120%;
	letter-spacing: 0.14px;
}

.rd-botui-feedback-comment {
	box-sizing: border-box;
	width: 100%;
	min-height: 176px;
	padding: var(--rd-spacing-md);
	resize: none;
	border: var(--rd-borderwidth-border-default) solid var(--rd-input-default);
	border-radius: var(--rd-borderradius-border-big);
	color: var(--rd-font-dark);
	font: inherit;
}

.rd-botui-feedback-comment:focus {
	border-color: var(--rd-input-focused);
	outline: var(--rd-borderwidth-border-focus) solid var(--rd-secondary-inactive);
}

@media (max-width: 600px) {
	.rd-botui-feedback-dialog-content h2 {
		font-size: var(--rd-fontsize-8);
	}
}

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);
}

/* The device pane is always rendered and hidden from here, never unmounted —
   its panel container is managed imperatively (see BotUI.render()), so removing
   it from the DOM destroys live device elements and their state. */
pc-botui .botui-container[data-has-devices="false"] .botui-devices,
pc-botui .botui-container[data-content-layout="chat"] .botui-devices {
	display: none;
}

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;
}

/* ─── BotScreen header ───────────────────────────────────────────────────────
   Column wrapper so the screen bar can sit ABOVE the scrolling device content:
   .botui-device-area is a flex ROW (it holds the divider as a sibling), so the
   header needs its own column context rather than becoming a third row item.
*/
pc-botui .botui-device-main {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

pc-botui .botui-screen-bar {
	display: flex;
	align-items: center;
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-md);
	/* Only the header scrolls out of the way when the device list is long —
	   without flex-shrink:0 it collapses under a tall grid. */
	flex-shrink: 0;
}

/* Anchor for the popup; also the outside-click boundary BotUI queries. */
pc-botui .botui-screen-switch {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	min-width: 0;
}

pc-botui .botui-screen-title {
	font-weight: 600;
	color: var(--botui-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

pc-botui .botui-screen-chevron {
	display: flex;
	align-items: center;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--botui-text-muted);
	border-radius: var(--botui-radius-sm);
}

pc-botui .botui-screen-chevron:hover {
	color: var(--botui-text);
}

pc-botui .botui-screen-chevron .material-icons {
	font-size: 20px;
}

pc-botui .botui-screen-menu {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: var(--rd-spacing-x-sm);
	min-width: 200px;
	background: var(--botui-bg-secondary);
	border: 1px solid var(--botui-border);
	border-radius: var(--botui-radius);
	box-shadow: var(--botui-shadow);
	z-index: 100;
	overflow: hidden;
	animation: botui-menu-in 150ms ease-out;
}

pc-botui .botui-screen-menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-spacing-sm);
	width: 100%;
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--botui-text);
	text-align: left;
}

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

pc-botui .botui-screen-menu-item-active {
	background: var(--botui-bg-tertiary);
	color: var(--botui-accent);
	font-weight: 600;
}

pc-botui .botui-screen-menu-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Device count — the reason it exists is the derived "Sonstige" bucket: it must
   be obvious that panels are parked there rather than lost. */
pc-botui .botui-screen-menu-count {
	color: var(--botui-text-muted);
	font-variant-numeric: tabular-nums;
}

/* 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;
	/* MUST override the grid rule's `align-items: start`: in a grid that is the
	   block (vertical) axis, but in a flex column it is the cross = horizontal
	   axis — inheriting `start` collapses every panel to its content width
	   (a lone chart rendered ~334px wide in a 973px container). */
	align-items: stretch;
}

/* A "fort" (solo device — the planning board) owns its screen and fills it.
   Three rules above exist for dashboards of several content-sized panels, and
   all three work against a single full-bleed application panel: rows sized to
   content, content and items parked at `start`, and the 80vh cap that stops a
   long table inflating its row. They have to be lifted together — relaxing only
   the cap leaves the panel top-aligned and short, which reads as "the CSS did
   nothing" rather than "one of four rules is missing".
   `flex: 1` covers the <=720px branch below, where the container is flex and
   the grid row sizing does not apply. */
pc-botui .botui-tab-panels.botui-solo-screen {
	/* A DEFINITE height, not just the `min-height: 100%` floor above. The panels
	   container sits in `.botui-device-content`, which is the workbench's real
	   scrollport (bounded, `overflow-y: auto`). With only a floor the container
	   grows past it and that parent scrolls the whole board as one block — so
	   `grid-auto-rows: 1fr` has no bound to divide and the fort's action bar ends
	   up a screenful below the fold. This is what "fills the workbench" means. */
	block-size: 100%;
	grid-auto-rows: 1fr;
	align-content: stretch;
	align-items: stretch;
}

pc-botui .botui-tab-panels.botui-solo-screen > .botui-tab-panel {
	max-height: none;
	flex: 1;
	/* The fort becomes the scrollport's owner rather than a long document inside
	   it — see the app-shell rules below. Without this the panel scrolls as a
	   block and the fort's action bar sits a screenful past the fold. */
	overflow: hidden;
}

/* Ordinary devices can also be solo; keep overflowing content reachable. */
pc-botui .botui-tab-panels.botui-solo-screen > .botui-tab-panel:not(:has(> pcu-planning-board-device, > pc-planning-board-device)) {
    overflow: auto;
    min-height: 0;
}

/* A fort in a solo screen is an app shell, not a document: its own list scrolls
   and its action bar stays reachable at the bottom of the workbench.
   Scoped to `.botui-solo-screen` on purpose — the same components are also used
   outside the workbench (admin/untitled-lit), where growing with their content
   is correct.
   Both boards are one column of siblings ending in the footer, so the rule is
   the same shape twice: fill the panel, let only the card list scroll.
   Sticky is not an option here: for a grid item the sticky containing block IS
   its grid area, so `bottom: 0` on the footer would have nothing to move in. */
pc-botui .botui-solo-screen > .botui-tab-panel > pcu-planning-board-device,
pc-botui .botui-solo-screen > .botui-tab-panel > pc-planning-board-device {
	block-size: 100%;
}

pc-botui .botui-solo-screen .pcu-planning-board-device__root {
	/* A single-column grid with `align-content: start` and a flex column pack
	   their children identically, and only the latter can hand one child the
	   leftover space. */
	display: flex;
	flex-direction: column;
	block-size: 100%;
}

pc-botui .botui-solo-screen .pb-board {
	block-size: 100%;
}

/* The scroll region of each step. Step 2 (the analysis) is listed too — it is a
   single element above the same footer, and leaving it out would let a long
   analysis be CLIPPED by the panel's `overflow: hidden` instead of scrolling. */
pc-botui .botui-solo-screen .pcu-planning-board-device__cards,
pc-botui .botui-solo-screen .pcu-planning-board-device__root > pcu-planning-analysis,
pc-botui .botui-solo-screen .pb-cards {
	flex: 1 1 auto;
	overflow-y: auto;
	/* Flex items floor at their content size; without this the list refuses to
	   shrink and pushes the footer back out of view. */
	min-block-size: 0;
}

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);
	padding: 8px;
}

/* 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;
	/* 16px = the panel's vertical padding; keeps the fixed scrollport inside
	   the 80vh panel cap on short viewports. */
	height: calc(78vh - 16px);
}

/* 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;
		/* Same axis flip as .botui-stack-fallback above — without this, panels
		   shrink to content width on mobile instead of filling the screen. */
		align-items: stretch;
	}
	pc-botui .botui-tab-panel {
		grid-area: unset !important;
	}
}

/* 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);
}

/* 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);
}

/* ═══════════════════════════════════════════════════════════════════════════
   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;
		min-width: 0;
		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;
		}
	}
}

/* Recent chats share the existing settings menu and its keyboard controls. */
pc-botui .botui-recent-chat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    text-align: start;
}
pc-botui .botui-recent-chat span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}