/* Bot Chat Insights - Full Screen Overlay */
/* Uses Ticket System Dark Theme colors */

/* Material Icons - Self-hosted font */
@font-face {
	font-family: "Material Icons";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("/src/fonts/MaterialIcons-Regular.woff2") format("woff2");
}

.material-icons {
	font-family: "Material Icons";
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

pc-bot-chat-insights {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.bci-overlay {
	position: absolute;
	inset: 0;
	background: #1e1e1e; /* --tckt-bg-primary */
	display: flex;
	flex-direction: column;
}

.bci-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

/* Header */
.bci-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	background: #252526; /* --tckt-bg-secondary */
	border-bottom: 1px solid #3e3e42; /* --tckt-border-color */
	gap: 20px;
}

.bci-header-left,
.bci-header-center,
.bci-header-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bci-header-center {
	flex: 1;
	justify-content: center;
}

.bci-token-pill {
	padding: 4px 12px;
	border-radius: 12px;
	color: white;
	font-size: 12px;
	font-weight: 600;
	font-family: monospace;
}

/* Bot Log ID Display */
.bci-bot-log-id {
	font-family: monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--rd-primary-active, #4776d6);
	background: rgba(71, 118, 214, 0.15);
	padding: 4px 10px;
	border-radius: 6px;
	border: 1px solid rgba(71, 118, 214, 0.3);
}

.bci-user-info {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #f0f0f0; /* --tckt-text-primary */
	font-size: 13px;
}

.bci-user-avatar {
	font-size: 18px;
}

.bci-user-facility {
	color: #9cdcfe; /* --tckt-text-secondary */
	font-size: 12px;
}

.bci-summary-stats {
	display: flex;
	align-items: center;
	gap: 16px;
}

.bci-stat {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #f0f0f0; /* --tckt-text-primary */
	font-size: 12px;
	padding: 4px 8px;
	background: #3c3c3c; /* --tckt-button-secondary-bg */
	border-radius: 4px;
}

.bci-stat .material-icons {
	font-size: 14px;
}

.bci-stat-price {
	color: #a6e22e; /* --tckt-status-todo-bg (green) */
	font-weight: 600;
}

.bci-bot-pill {
	background: #0e639c; /* --tckt-button-bg */
	color: white;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	margin-left: 4px;
}

.bci-close-btn {
	background: transparent;
	border: none;
	color: #f0f0f0; /* --tckt-text-primary */
	font-size: 18px;
	cursor: pointer;
	padding: 8px;
	border-radius: 4px;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bci-close-btn .material-icons {
	font-size: 20px;
}

.bci-close-btn:hover {
	background: #3c3c3c; /* --tckt-hover-bg */
}

/* Body */
.bci-body {
	flex: 1;
	overflow: hidden;
	display: flex;
}

.bci-loading,
.bci-error,
.bci-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #9cdcfe; /* --tckt-text-secondary */
	font-size: 14px;
}

.bci-error {
	color: #f92672; /* --tckt-status-canceled-bg */
}

/* Content Layout - Vertical: main area above, tracks footer below */
.bci-content {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

/* Main Area - Takes remaining space above tracks */
.bci-main-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #1e1e1e; /* --tckt-bg-primary */
	min-height: 200px;
	overflow: hidden;
}

/* =====================================================
   TRACKS FOOTER - Video Editor Style Timeline
   ===================================================== */

.bci-tracks-footer {
	height: 180px;
	min-height: 180px;
	background: #252526; /* --tckt-bg-secondary */
	border-top: 1px solid #3e3e42; /* --tckt-border-color */
	display: flex;
	flex-direction: column;
}

.bci-tracks-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #9cdcfe; /* --tckt-text-secondary */
	font-size: 13px;
}

.bci-tracks-container {
	display: flex;
	height: 100%;
	overflow: hidden;
}

/* Track Labels Column (left side) */
.bci-tracks-labels {
	width: 120px;
	min-width: 120px;
	background: #2d2d30; /* --tckt-bg-tertiary */
	border-right: 1px solid #3e3e42; /* --tckt-border-color */
	display: flex;
	flex-direction: column;
}

.bci-tracks-time-header {
	height: 24px;
	min-height: 24px;
	border-bottom: 1px solid #3e3e42;
	background: #333337;
}

.bci-track-label {
	height: 36px;
	min-height: 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	border-bottom: 1px solid #3e3e42;
	font-size: 11px;
	color: #f0f0f0;
}

.bci-track-label-text {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.bci-track-label-count {
	font-size: 10px;
	color: #9cdcfe;
	background: #3c3c3c;
	padding: 2px 6px;
	border-radius: 8px;
	margin-left: 6px;
}

/* Timeline Area (scrollable horizontal) */
.bci-tracks-timeline {
	flex: 1;
	overflow-x: auto;
	overflow-y: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	min-width: 0;
}

/* Time Axis Header */
.bci-tracks-time-axis {
	height: 24px;
	min-height: 24px;
	background: #333337;
	border-bottom: 1px solid #3e3e42;
	position: relative;
	min-width: 100%;
}

.bci-time-marker {
	position: absolute;
	height: 100%;
	border-left: 1px solid #505050;
	pointer-events: none;
}

.bci-time-marker-label {
	position: absolute;
	top: 4px;
	left: 4px;
	font-size: 10px;
	color: #9cdcfe;
	white-space: nowrap;
	font-family: monospace;
}

/* Track Rows */
.bci-track-row {
	height: 36px;
	min-height: 36px;
	position: relative;
	border-bottom: 1px solid #3e3e42;
	background: #1e1e1e;
	min-width: 100%;
}

.bci-track-row:nth-child(odd) {
	background: #252526;
}

/* Message Blocks */
.bci-block {
	position: absolute;
	top: 4px;
	height: 28px;
	min-width: 20px; /* Minimum 20px width for clickability */
	background: #0e639c; /* --tckt-button-bg */
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 0 6px;
	overflow: hidden;
	transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
	box-sizing: border-box;
}

.bci-block:hover {
	background: #1177bb; /* --tckt-button-hover */
	z-index: 2;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.bci-block.selected {
	background: var(--rd-primary-active, #4776d6); /* CI primary color */
	box-shadow: 0 0 0 2px var(--rd-primary-active, #4776d6), 0 2px 8px rgba(0, 0, 0, 0.4);
	z-index: 3;
}

/* Block colors by role */
.bci-block[data-role="user"] {
	background: #4a7c4f; /* greenish for user */
}

.bci-block[data-role="user"]:hover {
	background: #5a9c5f;
}

.bci-block[data-role="user"].selected {
	background: #3a6c3f;
	box-shadow: 0 0 0 2px #4a7c4f, 0 2px 8px rgba(0, 0, 0, 0.4);
}

.bci-block[data-role="system"] {
	background: #8c7a3c; /* yellowish for system */
}

.bci-block[data-role="system"]:hover {
	background: #a08a4c;
}

.bci-block[data-role="system"].selected {
	background: #7c6a2c;
	box-shadow: 0 0 0 2px #8c7a3c, 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Block status indicators */
.bci-block[data-status="busy"] {
	opacity: 0.8;
	animation: bci-block-pulse 1.5s ease-in-out infinite;
}

.bci-block[data-status="error"] {
	background: #7c3a3a !important;
}

.bci-block[data-status="error"]:hover {
	background: #8c4a4a !important;
}

@keyframes bci-block-pulse {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 1; }
}

.bci-block-preview {
	font-size: 10px;
	color: white;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.bci-block-spinner {
	width: 12px;
	height: 12px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: white;
	border-radius: 50%;
	animation: bci-spin 1s linear infinite;
	margin-left: 4px;
	flex-shrink: 0;
}

/* Scrollbar styling for tracks */
.bci-tracks-timeline::-webkit-scrollbar {
	height: 8px;
}

.bci-tracks-timeline::-webkit-scrollbar-track {
	background: #1e1e1e;
}

.bci-tracks-timeline::-webkit-scrollbar-thumb {
	background: #3e3e42;
	border-radius: 4px;
}

.bci-tracks-timeline::-webkit-scrollbar-thumb:hover {
	background: #505050;
}

/* Panel Toggles Row */
.bci-panel-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 16px;
	background: #252526; /* --tckt-bg-secondary */
	border-bottom: 1px solid #3e3e42; /* --tckt-border-color */
}

.bci-panel-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: #3c3c3c; /* --tckt-button-secondary-bg */
	border: 1px solid #3e3e42; /* --tckt-border-color */
	border-radius: 6px;
	color: #9cdcfe; /* --tckt-text-secondary */
	font-size: 12px;
	cursor: pointer;
	transition: all 0.15s;
}

.bci-panel-toggle:hover {
	background: #505050; /* --tckt-button-secondary-hover */
	color: #f0f0f0; /* --tckt-text-primary */
}

.bci-panel-toggle.enabled {
	background: #0e639c; /* --tckt-button-bg */
	border-color: #1177bb; /* --tckt-button-hover */
	color: white;
}

.bci-panel-toggle.unavailable {
	opacity: 0.5;
}

.bci-panel-toggle.enabled.unavailable {
	background: #75715e; /* --tckt-status-closed-bg */
	border-color: #75715e;
}

.bci-toggle-icon {
	font-size: 16px;
}

.bci-toggle-label {
	font-weight: 500;
}

.bci-toggle-check {
	font-size: 10px;
	width: 14px;
}

/* Editors Grid - Max 3 columns per row, items stretch to fill row */
.bci-editors-grid {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: #3e3e42; /* --tckt-border-color */
	overflow: hidden;
}

.bci-editor-panel {
	flex: 1 1 calc(33.333% - 1px);
	max-width: calc(100% - 1px);
	min-width: calc(33.333% - 1px);
	display: flex;
	flex-direction: column;
	background: #1e1e1e; /* --tckt-bg-primary */
	overflow: hidden;
}

.bci-editor-panel-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: #2d2d30; /* --tckt-bg-tertiary */
	border-bottom: 1px solid #3e3e42; /* --tckt-border-color */
}

.bci-editor-panel-icon {
	font-size: 14px;
}

.bci-editor-panel-title {
	font-size: 12px;
	font-weight: 600;
	color: #f0f0f0; /* --tckt-text-primary */
}

.bci-editor-panel-lang {
	font-size: 10px;
	color: #9cdcfe; /* --tckt-text-secondary */
	padding: 2px 6px;
	background: #3c3c3c; /* --tckt-button-secondary-bg */
	border-radius: 3px;
	margin-left: auto;
}

/* Run Button */
.bci-run-btn {
	background: #a6e22e; /* green */
	border: none;
	color: #1e1e1e; /* dark text */
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	transition: background 0.15s, opacity 0.15s;
	font-size: 11px;
	font-weight: 600;
}

.bci-run-btn:hover:not(:disabled) {
	background: #c3ef77;
}

.bci-run-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.bci-run-btn .material-icons {
	font-size: 16px;
}

.bci-run-btn.running .material-icons {
	animation: bci-spin 1s linear infinite;
}

/* Save Feedback Button */
.bci-save-btn {
	background: var(--rd-primary-active, #4776d6);
	border: none;
	color: white;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	transition: background 0.15s, opacity 0.15s;
	font-size: 11px;
	font-weight: 600;
}

.bci-save-btn:hover:not(:disabled) {
	background: color-mix(in srgb, var(--rd-primary-active, #4776d6), white 15%);
}

.bci-save-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.bci-save-btn .material-icons {
	font-size: 16px;
}

.bci-save-btn.saving .material-icons {
	animation: bci-spin 1s linear infinite;
}

@keyframes bci-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.bci-fullscreen-btn {
	background: transparent;
	border: none;
	color: #9cdcfe; /* --tckt-text-secondary */
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, color 0.15s;
	margin-left: 8px;
}

.bci-fullscreen-btn:hover {
	background: #3c3c3c; /* --tckt-hover-bg */
	color: #f0f0f0; /* --tckt-text-primary */
}

.bci-fullscreen-btn .material-icons {
	font-size: 16px;
}

.bci-editor-panel-content {
	flex: 1;
	position: relative;
	min-height: 150px;
}

.bci-editor-panel-content .bci-monaco-editor {
	position: absolute;
	inset: 0;
}

/* Fullscreen panel state */
.bci-editor-panel.fullscreen {
	position: absolute;
	inset: 0;
	z-index: 10;
	min-width: 0;
}

.bci-editor-panel.hidden {
	display: none;
}

/* JS Result panel - success/error header coloring */
.bci-editor-panel[data-panel-id="jsResult"].panel-success .bci-editor-panel-header {
	background: linear-gradient(90deg, rgba(166, 226, 46, 0.2) 0%, #2d2d30 100%);
	border-left: 3px solid #a6e22e;
}

.bci-editor-panel[data-panel-id="jsResult"].panel-success .bci-editor-panel-icon {
	color: #a6e22e;
}

.bci-editor-panel[data-panel-id="jsResult"].panel-error .bci-editor-panel-header {
	background: linear-gradient(90deg, rgba(249, 38, 114, 0.2) 0%, #2d2d30 100%);
	border-left: 3px solid #f92672;
}

.bci-editor-panel[data-panel-id="jsResult"].panel-error .bci-editor-panel-icon {
	color: #f92672;
}

/* Execution Result Panel */
.bci-execution-result {
	border-top: 1px solid #3e3e42; /* --tckt-border-color */
	background: #252526; /* --tckt-bg-secondary */
	max-height: 200px;
	display: flex;
	flex-direction: column;
}

.bci-execution-result.success {
	border-top-color: #a6e22e; /* green */
}

.bci-execution-result.error {
	border-top-color: #f92672; /* red */
}

.bci-execution-result-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #2d2d30; /* --tckt-bg-tertiary */
	border-bottom: 1px solid #3e3e42;
}

.bci-execution-result.success .bci-execution-result-header .material-icons {
	color: #a6e22e; /* green */
}

.bci-execution-result.error .bci-execution-result-header .material-icons {
	color: #f92672; /* red */
}

.bci-execution-result-title {
	font-size: 12px;
	font-weight: 600;
	color: #f0f0f0;
	flex: 1;
}

.bci-execution-result-duration {
	font-size: 11px;
	color: #9cdcfe;
	font-family: monospace;
}

.bci-close-result-btn {
	background: transparent;
	border: none;
	color: #9cdcfe;
	cursor: pointer;
	padding: 2px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, color 0.15s;
}

.bci-close-result-btn:hover {
	background: #3c3c3c;
	color: #f0f0f0;
}

.bci-close-result-btn .material-icons {
	font-size: 16px;
}

.bci-execution-result-output {
	flex: 1;
	margin: 0;
	padding: 10px 12px;
	font-family: monospace;
	font-size: 12px;
	color: #f0f0f0;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

.bci-execution-result.error .bci-execution-result-output,
.bci-error-output {
	color: #f92672;
}

/* Execution Results List */
.bci-execution-results-list {
	flex: 1;
	overflow: auto;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bci-execution-result-empty {
	padding: 12px;
	color: #9cdcfe;
	font-size: 12px;
	font-style: italic;
}

.bci-result-item {
	background: #2d2d30;
	border: 1px solid #3e3e42;
	border-radius: 6px;
	overflow: hidden;
}

.bci-result-item-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #333337;
	border-bottom: 1px solid #3e3e42;
}

.bci-result-item-index {
	font-size: 10px;
	font-weight: 600;
	color: #1e1e1e;
	background: #a6e22e;
	padding: 2px 6px;
	border-radius: 4px;
}

.bci-result-item-message {
	flex: 1;
	font-size: 12px;
	font-weight: 600;
	color: #f0f0f0;
}

.bci-result-item-type {
	font-size: 10px;
	color: #9cdcfe;
	background: #3c3c3c;
	padding: 2px 6px;
	border-radius: 3px;
	font-family: monospace;
}

.bci-result-item-data {
	margin: 0;
	padding: 10px 12px;
	font-family: monospace;
	font-size: 11px;
	color: #dcdcaa;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 150px;
}

.bci-result-item-data.bci-large-data {
	max-height: 300px;
}