/************************************************/
/*												*/
/* www.HS-and-H.com AI css file					*/
/*												*/
/************************************************/
/* For colour inspiration, see:					*/
/* https://www.cssportal.com/css3-color-names	*/
/************************************************/

	:root {
		--header-height:		35px;
		--footer-height:		30px;
		--sidebar-width:		600px;			/* CSS variable to provide active consistency in the sidebar width below */

		--log-panel-height: 	300px;			/* slide-up logger panel */
		--scratch-panel-height:	450px;			/* slide-up scratch panel */

		--bg-color-def:			white;			/* default input element b/g colour		*/
		--bg-color-edit:		yellow;			/* important user-editable elements		*/
		--bg-color-readonly:	lightblue;		/* read-only elements					*/
	}

	body, html {
		height:			100% !important;
		margin:			0px;
		border-width:	0px;
		padding:		0px;
		display:		flex;
		flex-direction: column;
		overflow:		auto;
	}
	
	div#content {
		display:		flex;
		flex:			1;
		list-style:		circle;
		flex-direction:	column; /* Stack children vertically */
		top:			var(--header-height);
		margin-top:		20px;
		margin-left:	0px;
		margin-right:	0px;
		margin-bottom:	10px;
		border-width:	0px;
		padding-top:	0px;
		padding-bottom:	0px;
		padding-left:	2px;
		padding-right:	2px;
		width:			100%;
		height:			calc(100vh - var(--header-height));
		font-family:	Arial, sans-serif;
		font-size:		12pt;

	}
	
	h2 {
		padding:		0px;
		padding-top:	10px;
		margin:			0px;
		margin-bottom:	3px;
	}
	
	.form-container {
		display:		flex;
		flex-direction:	column;
		align-items:	flex-start;
		width:			100%;
		margin:			0 auto;
	}

	#container {
		flex:			1;		/* Allows child elements to grow */
		display:		flex;
		flex-direction: column;
		top:			0;
		position:		relative;
	}

	/* ------------------------------------------------------------------ */

	.input-group {
		display:		flex;
		align-items:	center;
		/*width:		100%;*/
		/*margin-bottom:10px;*/
		position:		relative;	/* Ensure the positioning context for absolute positioning */
		gap:			10px;
	}
	
	.input-group label {
		flex:			0 0 100px;	/* Adjust this width to match the longest label */
		margin-right:	0px;		/* Space between label and input */
		max-width:		100px;		/* Minimum width based on the longest label */
		font-weight:	medium;		/* Optional styling */
		text-align:		right;		/* Align text to the right */
	}

	.input-group label.second-label {
		flex: 0 0 0px;				/* Adjust this width to match the longest label */
		margin-left: 25px;
		margin-right: 0px;
	}
	.input-group input,
	.input-group select {
		flex:			0;			/* fixed width */
		z-index:		1;
	}

	.input-group label[for="content_user"] {
		vertical-align: top;
		display:		inline-block;
	}
	
	.input-group textarea
	{
		z-index:		1;
		vertical-align:	top;
		display:		inline-block;
	}
	
	.input-number {							/* the AI API elements for numerical attributes	*/
		width:				70px; 			/* Displayed width of the container				*/
		max-width:			100%; 			/* Ensure it doesn't overflow the container		*/
		box-sizing:			border-box;		/* Include padding and border in the width		*/
		text-align:			right;			/* Align text to the right for numerical input	*/
		background-color:	var(--bg-color-def);
	}
	.input-text {							/* the AI API element 'prompt'					*/
		width:				700px; 			/* Displayed width of the container				*/
		max-width:			100%; 			/* Ensure it doesn't overflow the container		*/
		background-color:	var(--bg-color-def);
	}

	.input-file {display: flex; align-items: center; }
	input[type="file"] {
		width: 900px;						/* Adjust as needed */
		flex-grow: 1;
	}

	.read-only {							/* nuanced change for read-only cell */
		background-color: var(--bg-color-readonly);
	}

	.input-edit {							/* nuanced change for editable cell */
		background-color:	var(--bg-color-edit);
	}
	
	input:last-of-type::file-selector-button {
	  width: 100%;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	
	select.cboLookupLLM {
	  min-width:		120px;
	}
	
	/* highlight current display toggle button */
	.active-tab {
		background-color:	#007bff;
		color:				white;
		font-weight:		bold;
		border-bottom:		2px solid #0056b3;
	}	

	.error {
		color: red;
		font-size: 0.9em;
		display: none;
		margin-left: 10px;
	}

	/* highlight read-only areas */
	textarea[readonly] {
		background-color:	var(--bg-color-readonly);
		cursor:				not-allowed;
	}
	
	.multi-button-container {
		display:			flex;
		justify-content:	flex-end;		/* Push buttons to the right */
		gap:				10px;			/* Space between buttons */
		margin-left:		40px;			/* Ensures alignment when inside a flex parent */
	}
	
	/* ------------------------------------------------------------------ */
	/* Attributes Sidebar styles */
	/* ------------------------------------------------------------------ */
	.sidebar {
		position:			fixed;
		z-index:			10;
		top:				0;
		width:				var(--sidebar-width);				/* see --sidebar-width assignment above */
		right:				calc(-1 * var(--sidebar-width));
		height:				100%;
		background-color:	#f1f1f1;
		box-shadow:			0 0 5px rgba(0,0,0,0.5);
		overflow-x:			hidden;
		transition:			transform 0.5s;
		padding-top:		20px;
	}

	/* When the sidebar is active */
	.sidebar.active {
		right: 				0;
	}

	.sidebar .input-group {
		margin:				5px;
	}

	.sidebar .input-group label {
		flex:				0 0 120px;	/* Adjust this width to match the longest label */
		margin-right:		0px;		/* Space between label and input */
		min-width:			170px;		/* Minimum width based on the longest label */
		font-weight:		bold;		/* Optional styling */
		text-align:			right;		/* Align text to the right */
	}

	.sidebar .input-text {				/* .sidebar's version of .input-text */
		width:				100%;		/* Makes the textarea responsive to its container */
		max-width:			50ch;		/* Maximum width based on character count */
		box-sizing:			border-box;	/* Ensures padding and borders are included in width */
		resize:				vertical;	/* Allows vertical resizing by the user */
		overflow:			auto;		/* Adds scrollbars if content overflows */
		background-color:	var(--bg-color-def);
	}

	.sidebar .input-edit {				/* .sidebar's version of .input-text */
		background-color:	var(--bg-color-edit);
	}
	
	.sidebar .read-only {				/* .sidebar's version of .input-text */
		background-color:	var(--bg-color-readonly);
	}
	
	.sidebar hr {						/* horizontal divider */
	  border:				none;		/* Remove default border */
	  color:				#ccc;
	  height:				1px;		/* Set thickness */
	  background-color: 	#f1f1f1;	/* matches .sidebar{} */
	  margin:				1em 0;
	  margin-top:			10px;
	  margin-bottom:		10px;
	}

	/* Main form adjustment */
	.form-container {
		margin-right: var(--sidebar-width);	/* see --sidebar-width assignment above */
	}			

	/* ------------------------------------------------------------------ */
	/* Task logger & scratchpad Slide-up panel styles					  */
	/* ------------------------------------------------------------------ */
	/* ---------- generic slide-up behaviour ---------- */
	.slide-panel{
		position:			fixed;
		bottom:				calc(-1 * var(--panel-height)); /*     default: hidden    */
		left:				0;
		width:				100%;
		background:			#222;
		color:				#fff;
		border-top:			2px solid #444;
		transition:			bottom .3s ease;
		max-height:			var(--panel-height);
		height:				var(--panel-height);
		overflow-y:			auto;
		z-index:			9;                      /* sits above main UI */
	}

	/* visible state */
	.slide-panel.active{
		bottom:				0;
	}

	/* drag handle sitting **inside** the panel */
	/* ---------- resize bar ---------- */
	.slide-panel .drag-handle{
		height:				4px;				/* thinner, almost invisible */
		background:			#666;				/* subtle visual cue         */
		cursor:				ns-resize;
		user-select:		none;				/* no text highlight while dragging */
		touch-action:		none;				/* consistent pointer events on mobile */
	}

	.slide-panel .drag-handle:hover{
			background:		#888;
	}

	/* ---------- panel title band ---------- */
	.slide-panel .panel-title{
		height:				20px;				/* sits under the 4-px drag strip */
		line-height:		20px;
		padding:			0 2px;
		background:			#333;
		color:				#fff;
		font-size:			13px;
		display:			flex;
		justify-content:	flex-start;			/* items sit on the rhs of the header */
		align-items:		center;
		user-select:		none;
		border-bottom:		1px solid #444;
	}

	.slide-panel .panel-title#logPanel-header {
		background-color:	LemonChiffon;
		color	:			black;
		justify-content:	space-between;		/* override the default flex-start */
	}
	.slide-panel .panel-title#scratchPanel-header {
		background-color:	LightSalmon;
		color:				black;
	}

	.slide-panel .panel-action {
		color:				white;
		border:				none;
		border-radius:		3px;
		padding:			2px 6px;		/* small but clickable */
		margin:				0 2px;
		font-size:			14px;
		line-height:		1;
		cursor:				pointer;
		user-select:		none;
	}

	.slide-panel .panel-action#logPanel-header {
		background-color:	Wheat;    		/* contrasts with the header colour */
	}
	.slide-panel .panel-action#scratchPanel-header {
		background-color:	Tomato;    		/* contrasts with the header colour */
	}
	
	.slide-panel .panel-action:first-of-type {
		margin-left:		auto;
	}
	.slide-panel .panel-action:hover {
		background-color:	darkred;
	}

	/* tiny “×” (close) button */
	.slide-panel .panel-close{
		background:			none;
		border:				0;
		color:				currentColor;
		font-size:			13px;
		cursor:				pointer;
		padding:			0 2px;
	}
	.slide-panel .panel-close:hover{
		color:				#f55;
		}
	
	/* scratch-panel */
	/* ------------- */
	/* make the scratch-pad icons pop on transparent background */
	#scratchPanel-header .panel-action {
		background:			transparent;		/* no white box behind them */
		color:				Tomato;				/* keep the accent color */
		font-size:			16px;				/* slightly larger for visibility */
		filter:				drop-shadow(0 0 2px rgba(0,0,0,0.5));	/* subtle outline */
		border:				none;
		padding:			4px 6px;
		cursor:				pointer;
		position:			relative;
	}

	/* gentle hover glow */
	#scratchPanel-header .panel-action:hover {
		background:			rgba(255,99,71,0.15);
	}

	#scratchPanel-filename {
		color:				black;
		font-size:			14px;
		font-style:			italic;
		opacity:			1.0;
	}

	/* scratch-pad action buttons on header */
	#scratchPanel-clear::before {
		content:	"\1F5D1 ";						/* Wastebasket */
		color:		black;
		font-size:	18px;
	}

	#scratchPanel-print::before {
		content:	"\1F5A8 ";						/* Printer */
		color:		black;
		font-size:	18px;
	}

	#scratchPanel-load::before {
		content:	"\1F4C4 ";						/* Document */
		color:		black;
	}

	#scratchPanel-save::before {
		content:	"\1F4BE ";						/* Disk */
		color:		black;
	}

	#logPanel-close::before,
	#scratchPanel-close::before {
		content:	"\2612 ";						/* Multiplication sign (×) */
		color:		black;
		font-size:	20px;
	}

	.dirty-marker {
		color:			black;
		opacity:		1.0;
		margin-left:	4px;
		font-weight:	bold;
		font-style:		normal;
	}

	.dirty-marker.hidden {
		display:		none;
	}

		/* ---------- specialisations ---------- */
		.log-panel{
			--panel-height:var(--log-panel-height);
		}
		/* NEW scratch‑pad */
		.scratch-panel{
			--panel-height:var(--scratch-panel-height);
			background:#fdfdfd;             /* lighter bg to distinguish */
			color:#000;
			border-top:2px solid #888;
		}

	/* ------------------------------------------------------------------ */
	/* An <hr class="session-divider"> is inserted into the canvas after
	/* each session (an agentic mission, rendering file contents...).
	/* Explicit assignment is preferred over a css rule on a canvas'
	/* session relying on an element's class, say.
			.slide-panel .log {  <-- all session html requires a 'log' class
			  ...
			  padding-bottom: 8px;
			  margin-bottom:  8px;
			  border-bottom:  1px solid #666;
			}	
	/* ------------------------------------------------------------------ */
	.canvasSession-divider {
	  border:				none;
	  border-top:			1px solid #666;
	  margin:				5px 2px;
	  width:				100%;
	}

	.canvasSession-divider:last-of-type {
	  border-top:			none;
	  margin:				0 0;
	  width:				100%;
	}

	/* ------------------------------------------------------------------ */
	.iframe-container {
		flex: 				1;
		width:				calc(100% - 6px);
		margin-right:		0px;
		margin-left:		0px;
		margin-top:			3px;
		margin-bottom:		3px;
		padding:			0px;
		border:				1px solid black;
		background-color:	var(--bg-color-def);
		max-height: 		calc(100vh - var(--header-height) - var(--footer-height));
	}
	iframe {
		width:				100%;
		height:				100%;			/* Full height of container */
		border:				none;			/* Remove default iframe border */
		background-color:	var(--bg-color-def);
	}