/* -----------------------------------------------------------
 * koderAI UI - Aug 2025, Updated Sept 28, 2025
 * -----------------------------------------------------------
 */
:root {
	--koderAI-purple: #5F01D1 !important;
	--koderAI-bg: #2B2D31;
	--koderAI-control-bar: #3a3d43;
	--koderAI-button: #3a3d43;
	--novnc-darkblue: #5F01D1 !important;
}

[theme=light] {
	--koderAI-bg: #fff;
	--koderAI-bg-dark: #2B2D31;
	--koderAI-control-bar: #ccc;
	--koderAI-button: #bbb;
	--novnc-darkblue: #5F01D1 !important;
}

#noVNC_container > div { 
  background: var(--koderAI-bg) !important;
}

[theme=light] .logo-dark {
	display: none;
}

[theme=dark] .logo-light {
	display: none;
}

/* ----------------------------------------
 * Background
 * ----------------------------------------
 */
body, #noVNC_container {
	background-color: var(--koderAI-bg) !important;
}

.noVNC_panel .noVNC_heading {
	background-color: var(--koderAI-purple);
}

input[type=checkbox].toggle:checked {
	background-color: var(--koderAI-purple);
}

#noVNC_status.noVNC_status_error {
	background-color: var(--koderAI-purple);
}

#noVNC_connect_dlg .noVNC_logo {
	margin-top: 0px;
}

#noVNC_fullscreen_button {
	width: 25px !important;
}

	#noVNC_fullscreen_button img {
		color: var(--koderAI-purple) !important;
	}

#noVNC_connect_button {
	border-radius: 30px !important;
	background: var(--koderAI-button) !important;
	font-weight: normal !important;
	font-size: 16px;
	margin-top: 10px;
}

#noVNC_connect_dlg div {
	background-color: transparent !important;
	box-shadow: none !important;
}

/* ----------------------------------------
 * Control bar
 * ----------------------------------------
 */
#noVNC_control_bar {
	background-color: var(--koderAI-control-bar);
	border-radius: 0 16px 16px 0;
}

/* hide the ugly box shadow */
#noVNC_control_bar.noVNC_open {
	box-shadow: none !important;
}

#noVNC_control_bar::before {
	/* This extra element is to get a proper shadow */
	content: none;
}

.noVNC_right #noVNC_control_bar {
	left: 100%;
	border-radius: 16px 0 0 16px;
}

#noVNC_control_bar_handle {
	background-color: var(--koderAI-controlBar);
}

#noVNC_control_bar_hint {
	box-shadow: 0 0 10px black, inset 0 0 10px 10px var(--koderAI-controlBar);
}


/* hide the control bar by default */
#noVNC_control_bar_anchor{
	display: none !important;
}

#noVNC_control_bar_anchor.show {
	display: flex !important;
}