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

	:root {
		--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					*/
		
		--canvas-tabs-gutter-height:	28px;   /* canvas tab bar height */

	}

/* Hard guarantee: if [hidden] is present, nothing renders */
[hidden] { display: none !important; }

	body, html {
		height:			100% !important;
		margin:			0px;
		border:			0px;
		border-width:	0px;
		display:		flex;
		flex-direction: column;
		overflow:		auto;
	}

html, body {
  padding:			0;
  margin:			0;
}

/* Offset page content so fixed header/footer doesn’t overlap */
body {
  padding-top:		20px; /*var(--header-height);				/* from included header.css */
  padding-bottom:	calc(var(--footer-height) + var(--canvas-tabs-gutter-height));		/* from included footer.css */
}

	
	div#content {
		display:		flex;
		flex:			1 1 auto;
		list-style:		circle;
		flex-direction:	column; /* Stack children vertically */
		margin:			0;
		margin-left:	0px;
		margin-right:	0px;
		margin-bottom:	10px;
		border-width:	0px;
		padding:		0 2px;
		padding-top:	0px;
		padding-bottom:	0px;
		padding-left:	2px;
		padding-right:	2px;
		width:			100%;
		font-family:	Arial, sans-serif;
		font-size:		12pt;

	}
	
	h2 {
		padding:		0px;
		padding-top:	0px;
		margin:			0 0 0 0;
		margin-bottom:	0px;
	}

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

/* border around any group of elements */
.bordered-block {
	width:				fit-content;		
    border:				1px solid #999;		/* thin border */
    padding:			6px;				/* keeps border off the text */
    border-radius:		4px;				/* optional */
    background:			#fafafa;			/* optional subtle background */
}

	/* ------------------------------------------------------------------ */
	/* define once, globally */
	:root {
		--label-width: 90px;   /* tune visually */
	}

.input-group{
  display: grid;
  grid-template-columns: var(--label-width, 100px) 1fr;
  column-gap: 0.5rem;
  align-items: start;
		margin-block: 0.2rem;   /* top + bottom spacing*/
}

.input-group > :last-child {
    min-width: 0;
}

.input-group > textarea,
.input-group > input,
.input-group > select{
  min-width: 0;
}

/* “normal rules” inside the row */
.ig-field{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;   /* or wrap, if you prefer */
}

/* explicit roles */
.input-group > .ig-label{ grid-column: 1; }
.input-group > .ig-field{ grid-column: 2; min-width: 0; }

		
	.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 */
	}


.response-shell {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;              /* rail <-> iframe spacing */
  
  min-width: 0;				/* Without this, long iframe content can force overflow in grid/flex layouts. */
}

.response-rail {
  display: flex;
  flex-direction: column;   /* stack buttons */
  gap: 0.5rem;
  flex: 0 0 auto;
}

.response-rail .btn {
  width: 100%;              /* optional: uniform width */
  white-space: nowrap;
}

/* iframe-container continues to own sizing of the response surface */
.response-shell .iframe-container {
  flex: 1 1 auto;
  min-width: 0;             /* important: avoids flex overflow */
}

	
	/* ------------------------------------------------------------------ */
	/* Attributes Sidebar styles */
	/* ------------------------------------------------------------------ */
	.sidebar{
	  --label-width: 170px;   /* sidebar needs longer labels */
	}
	
	.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 {
		margin-right:		0px;		/* Space between label and input */
		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) + var(--footer-height) + var(--canvas-tabs-gutter-height));
		left:				0;
		width:				100%;
		background:			#222;
		color:				#fff;
		transition:			bottom .3s ease;
		transition: 		transform .18s ease;
		max-height:			var(--panel-height);
		height:				var(--panel-height);
		overflow-y:			auto;
		z-index:			9;                      /* sits above main UI */
	}

	/* Fixed location for the bottom of panels/canvases */
	.slide-panel.active{
		bottom: calc(var(--footer-height) + var(--canvas-tabs-gutter-height));
	}

	/* 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.scratch-panel-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.scratch-panel-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;
		}
	

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

	/* ------------------------------------------------------------------ */
	.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) - var(--canvas-tabs-gutter-height));
	}
	iframe {
		width:				100%;
		height:				100%;			/* Full height of container */
		border:				none;			/* Remove default iframe border */
		background-color:	var(--bg-color-def);
	}


	/* ------------------------------------------------------------------ */
	/* Canvas (scratch-panel) */
	/* ---------------------- */
	/* make the scratch-pad icons pop on transparent background */
	.scratch-panel-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 */
	.scratch-panel-header .panel-action:hover {
		background:			rgba(255,99,71,0.15);
	}

	.scratch-panel-filename {
		color:				black;
		font-size:			14px;
		font-style:			italic;
		opacity:			1.0;
	}

	/* action buttons on header */
	/* ------------------------ */
	.scratch-panel-btn-history::before {
		content:	"\1F50D ";						/* Magnifying Glass */
		color:		black;
		font-size:	18px;
	}

	.scratch-panel-btn-clear::before {
		content:	"\1F5D1 ";						/* Wastebasket */
		color:		black;
		font-size:	18px;
	}

	.scratch-panel-btn-print::before {
		content:	"\1F5A8 ";						/* Printer */
		color:		black;
		font-size:	18px;
	}

	.scratch-panel-btn-load::before {
		content:	"\1F4C4 ";						/* Document */
		color:		black;
	}

	.scratch-panel-btn-save::before {
		content:	"\1F4BE ";						/* Disk */
		color:		black;
	}

	#logPanel-close::before,
	.scratch-panel-btn-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;
	}

/* ---------- canvas tabs bar (Excel-like) ---------- */
/* ---------- canvas tabs gutter: docked above fixed footer ---------- */
.canvas-tabs-host{
  position: fixed;
  left: 0;
  right: 0;

  /* ✅ sits exactly on top of the fixed footer */
  bottom: var(--footer-height);

  height: var(--canvas-tabs-gutter-height);
  display: flex;
  align-items: flex-end;
  gap: 0;

  padding: 0 6px;
  background: #f2f2f2;
  border-top: 1px solid #bbb;

  /* must be below footer (9999), but above panels (see below) */
  z-index: 9200;

  overflow-x: auto;
  white-space: nowrap;
}

/* tab */
.scratch-tab{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;

	/* Overlap slightly so tabs look contiguous */
	margin: 0 0 0 -1px;

	padding: 5px 10px 4px 10px;
	border: 1px solid #bbb;
	border-bottom: none;

	background: #e6e6e6;
	cursor: pointer;
	user-select: none;
	font-size: 12px;
	white-space: nowrap;
}

/* Excel-ish sloping edges */
.scratch-tab::before{
	content: "";
	position: absolute;
	left: -10px;
	bottom: 0;
	width: 10px;
	height: 100%;
	background: inherit;
	border-left: 1px solid #bbb;
	border-top: 1px solid #bbb;
	transform: skewX(-25deg);
	transform-origin: bottom right;
}

.scratch-tab::after{
	content: "";
	position: absolute;
	right: -10px;
	bottom: 0;
	width: 10px;
	height: 100%;
	background: inherit;
	border-right: 1px solid #bbb;
	border-top: 1px solid #bbb;
	transform: skewX(25deg);
	transform-origin: bottom left;
}

/* active tab is "front-most" */
.scratch-tab.is-active{
	background: #fff;
	border-color: #888;
	z-index: 3;
}

.scratch-tab:not(.is-active){
	z-index: 1;
}

/* close button */
.scratch-tab .scratch-tab-close{
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0 2px;
	font-size: 14px;
	line-height: 14px;
	color: red;
}
.scratch-tab .scratch-tab-close:hover{ color:#c00; }

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

/* ------------------------------------------------------------------ */
/* Mission Explorer and dependent windows/pop ups.					  */
/* Generated by ChatGPT-5.2 21-i-2025								  */
/* ------------------------------------------------------------------ */
/* Drawer */
.hsh-drawer {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 800px;
	min-width: 800px;
	transform: translateX(-100%);
	transition: transform .18s ease;
	background: #fff;
	border-right: 1px solid #ddd;
	box-shadow: 2px 0 12px rgba(0,0,0,.12);
	z-index: 9000;
	display: flex;
	flex-direction: column;
}
.hsh-drawer.is-open { transform: translateX(0); }
.hsh-drawer-header {
	display:flex; align-items:center; justify-content:space-between;
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
}
.hsh-drawer-title { font-weight: 600; font-size: 14px; }
/* Make the close “×” button reliably styled and clickable */
.hsh-drawer-close {
	font-size: 20px;
	line-height: 20px;
	padding: 2px 8px;
	background: none;
	border: 0;
	cursor: pointer;
}
/*
flex/overflow behaviour for modal body
In a flex column, a scrolling middle section typically needs flex: 1 and min-height: 0 
to avoid the body pushing the footer off-screen or refusing to scroll properly..hsh-modal-body.
*/
.hsh-drawer-body {
	padding: 10px 12px;
	overflow: auto;
	flex: 1 1 auto;
	min-height: 0;   /* critical for overflow within flex */
}

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

/* Popover menu */
.hsh-popover {
	position: fixed;
	min-width: 160px;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 2px 10px rgba(0,0,0,.18);
	z-index: 9700; /* above modal header if needed */
	padding: 6px 0;
	font-size: 12px;
}
.hsh-popover-item {
	padding: 3px 3px;
	cursor: pointer;
}
.hsh-popover-item:hover { background: #f5f5f5; }
/* Backdrop + Modal */

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

.hsh-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.35);
	z-index: 9500;
}
.hsh-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(820px, 92vw);
	max-height: 80vh;
	background: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 8px 28px rgba(0,0,0,.28);
	z-index: 9600;
	display:flex;
	flex-direction: column;
}
.hsh-modal-header {
	display:flex; align-items:center; justify-content:space-between;
	padding: 3px 4px;
	border-bottom: 1px solid #eee;
}
.hsh-modal-title { font-weight: 600; font-size: 12px; }
/* Make the close “×” button reliably styled and clickable */
.hsh-modal-close {
	font-size: 12px;
	line-height: 16px;
	padding: 2px 8px;
	background: none;
	border: 0;
	cursor: pointer;
}
/*
flex/overflow behaviour for modal body
In a flex column, a scrolling middle section typically needs flex: 1 and min-height: 0 
to avoid the body pushing the footer off-screen or refusing to scroll properly.
*/
.hsh-modal-body {
	padding: 3px 6px;
	overflow: auto;
	flex: 1 1 auto;
	min-height: 0;   /* critical for overflow within flex */
}
.hsh-modal-footer { padding: 10px 12px; border-top: 1px solid #eee; text-align:right; }


/* ------------------------------------------------------------------------- */
/* .hsh-modal-instances-table within the .hsh-modal form					 */
/* ------------------------------------------------------------------------- */
.hsh-modal .hsh-modal-instances-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.hsh-modal .hsh-modal-instances-table th,
.hsh-modal .hsh-modal-instances-table td {
	padding: 3px 6px;
	border-bottom: 1px solid #e6e6e6;
	color: #111;
	background: #fff;
}

.hsh-modal .hsh-modal-instances-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #f5f5f5;
	font-weight: 600;
}

.hsh-modal .hsh-modal-instances-table tbody tr:nth-child(even) td {
	background: #fafafa;
}

/* Force readable MissionInstance column in instances modal */
.hsh-modal .hsh-modal-instances-table td.mono,
.hsh-modal .hsh-modal-instances-table td:first-child {
	color: #000 !important;
	font-weight: 600;
}

/* If any earlier rules tint the first column, neutralise them for this table */
.hsh-modal .hsh-modal-instances-table td:first-child {
	background: inherit !important;
}

/* Row hover inside instances modal */
.hsh-modal .hsh-modal-instances-table tbody tr:hover td {
	background: rgba(0,0,0,0.04);
}