/* ==========================
// (c) LSD 2026
// ========================== */

HTML	/* default, above 1050 */
{
	--defaultFontSize: 15px;
	--leftBarWidth: 280px;
}

/* === Reset & base ============================================================================ */

*
{
	padding: 0px;
	margin: 0px;
	
	box-sizing: border-box;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--defaultFontSize);
}

.hidden
{
	display: none !important;
}

.blurred
{
	filter: blur(2px) !important;
}

.noshow
{
	visibility: hidden !important;
}

DIV.error
{
	border: 1px solid #550000;
	border-radius: 5px;
    background-color: #ffcccc;
    color: #550000;
    padding: 10px;
    margin: 10px 5px;
	
	&:before
	{
		content: '⛔';
		padding: 0px 5px 0px 0px;
	}
}

DIV.success
{
	border: 1px solid #005500;
	border-radius: 5px;
    background-color: #ccffcc;
    color: #005500;
    padding: 10px;
    margin: 10px 5px;

	&:before
	{
		content: '✅';
		padding: 0px 5px 0px 0px;
	}
}


DIV.info
{
	border: 1px solid #000055;
	border-radius: 5px;
    background-color: #ccccff;
    color: #000055;
    padding: 10px;
    margin: 10px 5px;

	&:before
	{
		content: 'ℹ️';
		padding: 0px 5px 0px 0px;
	}
}


PRE
{
	font-family: courier;
    font-size: 12px;
    color: #888888;
    border: 1px dotted #888888;
    margin: 5px;
    padding: 5px;
	overflow: hidden;
}


/* === Wizard ================================================================================ */


.sf-container
{
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    overflow: hidden;

	.sf-header
	{
		display: flex;
		border-bottom: 1px solid #ddd;
	}

	.sf-stepper
	{
		display:flex;
		align-items:center;
		padding:20px;
		background:#fafafa;

		.sf-step-node{
			display:flex;
			flex-direction:column;
			align-items:center;
			cursor:pointer;
			position:relative;
		}

		/* Circle */

		.sf-step-circle{
			width:28px;
			height:28px;
			border-radius:50%;
			border:2px solid #ccc;
			display:flex;
			align-items:center;
			justify-content:center;
			font-size:13px;
			background:white;
			transition:all 0.2s;
		}

		/* Label */

		.sf-step-label{
			margin-top:6px;
			font-size:13px;
			color:#666;
			white-space:nowrap;
		}

		/* Connector line */

		.sf-step-line{
			flex:1;
			height:2px;
			background:#ddd;
			margin: 0px 10px 20px 10px;
		}

		/* Active step */

		.sf-step-node.active .sf-step-circle{
			border-color:#2c7be5;
			background:#2c7be5;
			color:white;
		}

		.sf-step-node.active .sf-step-label{
			color:#2c7be5;
			font-weight:bold;
		}

		/* Completed step */

		.sf-step-node.done .sf-step-circle{
			border-color:#2c7be5;
			background:#2c7be5;
			color:white;
		}

		.sf-step-line.done{
			background:#2c7be5;
		}
	}

	.sf-content-wrapper
	{
		position:relative;
		overflow:hidden;
	}

	.sf-content
	{
		padding: 10px 20px;
	}


	.sf-footer
	{
		display:flex;
		justify-content:space-between;
		padding:15px;
		border-top:1px solid #ddd;
		background:#fafafa;
	}

	.sf-footer button
	{
		padding:8px 18px;
		border:none;
		border-radius:4px;
		background:#2c7be5;
		color:white;
		cursor:pointer;
	}

	.sf-footer button:disabled
	{
		opacity:0.5;
		cursor:default;
	}


	.sf-enter
	{
		animation:sfSlideIn 0.25s ease;
	}

	.sf-leave
	{
		animation:sfSlideOut 0.2s ease;
	}

	@keyframes sfSlideIn
	{
		from{
			transform:translateX(30px);
			opacity:0;
		}
		to{
			transform:translateX(0);
			opacity:1;
		}
	}

	@keyframes sfSlideOut
	{
		from{
			transform:translateX(0);
			opacity:1;
		}
		to{
			transform:translateX(-30px);
			opacity:0;
		}
	}
}



.is-container
{
    display:flex;
    gap:30px;
    font-family:Arial;
}

.lp-panel
{
	flex: 1;

	.lp-list
	{
		border: 1px solid #ccc;
		padding: 0;
		margin: 0;
		list-style: none;
		
		height: 200px;
		overflow-y: auto;

		li
		{
			padding: 10px;
			border-bottom: 1px solid #eee;

			span
			{
				display: block;
				color: #aaaaaa;
				padding: 3px 5px 0px 5px;
			}
		}

		li:hover
		{
			background: #f5f5f5;
		}
		
		li.selected
		{
			background: #d5d5ff;
		}
		li.selected:hover
		{
			background: #e5e5ff;
		}
	}

	.lp-list.draggable
	{
		li
		{
			cursor: grab;
		}
		
		li:active
		{
			cursor:grabbing;
		}
	}

	h3
	{
		margin-bottom:8px;
	}
}



/* === Loadmask ================================================================================ */

.loading-placeholder
{
    padding: 20px;
 
	.skeleton {
		position: relative;
		overflow: hidden;
		background: #e3e3e3;
		border-radius: 4px;
		margin-bottom: 12px;
	}

	/* Different element sizes */

	.skeleton.title {
		height: 24px;
		width: 40%;
	}

	.skeleton.line {
		height: 14px;
		width: 100%;
	}

	.skeleton.line.short {
		width: 60%;
	}

	/* Shimmer animation */

	.skeleton::after {
		content: "";
		position: absolute;
		top: 0;
		left: -150px;
		height: 100%;
		width: 150px;
		background: linear-gradient(
			90deg,
			transparent,
			rgba(255,255,255,0.6),
			transparent
		);
		animation: shimmer 1.2s infinite;
	}
}

@keyframes shimmer {
	100% {
		transform: translateX(600px);
	}
}


.loadmask
{ 
	position: absolute;
	inset: 0;

	background: rgba(0,0,0,0.5);
	border-radius: inherit;
	
	z-index: 100;

	> DIV
	{
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff; color: #333;
		border-radius: 10px;
		padding: 14px 16px;
		display: flex; align-items: center; gap: 12px;
		box-shadow: 0 6px 20px rgba(0,0,0,0.75);
		min-width: 220px;
	}

	.spinner
	{
		width: 18px; height: 18px;
		border: 2px solid #e2e8f0;
		border-top-color: #4a90e2;
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

	.label
	{
		font-size: 14px;
	}
}

@keyframes spin
{
	to { transform: rotate(360deg); } 
}


/* === Structure =============================================================================== */

HTML
{
	height: 100%;

	UL.layoutMenu
	{
		display: flex;
		list-style-type: none;
		
		> LI
		{
			height: 35px;
			padding: 0px 10px;
			margin: 2px 5px 2px 5px;
			
			border-radius: 10px;
			border: 1px solid #ccccff;
			background-color: #f5f5ff;

			cursor: pointer;
			user-select: none;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			
			.icon
			{
				font-size: 20px;
				filter: grayscale(1);
			}
			.title
			{
				margin: 5px 0px 5px 5px;
			}
		}

		> LI:hover
		{
			background-color: #ffffff;
			
			> .icon
			{
				filter: none;
			}
			> .title
			{
			}
		}
		
		> LI.on
		{
			background-color: #ccccff;
			color: #2222aa;
			
			> .icon
			{
				filter: none;
			}
		}
	}

    BODY
	{
        height: 100vh;
		background: radial-gradient(circle, #000033 0%, #000088 30%, #00aaff 100%);
		
		padding: 20px 20px 0px 20px;
		
        display: flex;
        flex-direction: column;
        overflow: hidden;
	}

    .layoutHeader
	{
        display: flex;
        flex-shrink: 0;
		
		background-color: #efefff;
		border-radius: 10px 10px 0px 0px;
		
		/* filter: drop-shadow(3px 4px 2px black); */
		
		.headerLogo
		{
			border-radius: 10px 0px 0px 0px;
			
			width: var(--leftBarWidth);
			text-align: center;
		}
		
		IMG.logo
		{
			height: 70px;
			cursor: pointer;
		}
		
		.headerContent
		{
			flex: 1;
			
			border-radius: 0px 10px 0px 0px;
			background-color: #f5f5ff;
			
			padding: 0px 20px;
			
			display: flex;
            align-items: center;
            justify-content: end;
			
			#auth
			{
				position: relative;
				
				UL
				{
					display: none;
				}
			}
			
			#auth:hover UL
			{
				position: absolute;
				z-index: 10;
				
				right: -10px;
				top: 30px;
				padding: 5px;
				
				display: flex;
				flex-direction: column;
			}
		}
    }

    .layoutMain
	{
        flex: 1;

        display: flex;
        overflow: hidden;
		
		/* filter: drop-shadow(3px 4px 2px black); */

		.layoutMenubar
		{
			flex-shrink: 0;

			width: var(--leftBarWidth);
			background-color: #e5e5ff;

			overflow-y: auto;
			overflow-x: hidden;

			UL.layoutMenu
			{
				padding: 10px 0px;
				flex-direction: column;
				
				> LI
				{
					justify-content: left;
                    background-color: inherit;
                    border: none;
                    padding: 5px 10px;
				}

				> LI:hover
				{
                    background-color: #ffffff;
				}

				> LI.on
				{
                    background-color: #ccccff;
				}
			}
		}

		.layoutContent
		{
			flex: 1;
			background: #ffffff;
			padding: 10px;

			overflow-y: auto;
			overflow-x: hidden;
		}
    }

	.layoutMainFooter
	{
        flex-shrink: 0;

        display: flex;
		
		height: 10px;
		border-radius: 0px 0px 10px 10px;
		
		/* filter: drop-shadow(3px 4px 2px black); */

		.layoutMenuFooter
		{
			width: var(--leftBarWidth);
			
			border-radius: 0px 0px 0px 10px;
			background-color: #e5e5ff;
		}

		.layoutContentFooter
		{
			flex: 1;
			border-radius: 0px 0px 10px 0px;
			background-color: #ffffff;
		}
	}
	
	BODY.unauth 
	{
		.layoutMainFooter .layoutMenuFooter
		{
			background-color: #ffffff;
		}
		.layoutMain .layoutMenubar
		{
			display: none;
		}
	}

    .layoutFooter 
	{
        flex-shrink: 0;
		
		color: #cccccc;
		
		text-align: center;
		padding: 10px;
    }
}

/* === Backdrop =============================================================================== */

.backdrop
{
	position: absolute;
	inset: 0;

	background: rgba(0,0,0,0.5);
	border-radius: inherit;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	z-index: 100;
}

/* === Dialog =============================================================================== */

.dialogContainer
{
	border: 3px double #000000;
	border-radius: 10px;
	background-color: #ffffff;
	
	.header
	{
		padding: 5px 10px;
		border-radius: 10px 10px 0px 0px;
		background-color: #eeeeff;
		display: flex;
		justify-content: space-between;
		
		h1
		{
			padding: 0px 15px;
			margin: 0px;
		}
		
		.closeDialog
		{
			font-size: 25px;
			margin-top: -10px;
			margin-right: -5px;
			cursor: pointer;
		}
	}
	
	.content
	{
		padding: 10px;
	}
}

/* === Forms =============================================================================== */

.inputGroup 
{
	margin: 10px auto 5px auto;
	position: relative;

	label {
		padding: 0px;
		display: block;
		font-size: 14px;
		margin: 5px 0px 0px 0px;
		color: #555;
	}

	input {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid #ccc;
		border-radius: 6px;
		font-size: 15px;
	}
	
	textarea {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid #ccc;
		border-radius: 6px;
		font-size: 15px;
	}

	select {
		width: 100%;
		padding: 5px 0px;
		border: 1px solid #ccc;
		border-radius: 6px;
		font-size: 15px;
	
		option {
			padding: 5px 12px;
		}
	}

	input:focus {
		border-color: #4a90e2;
		outline: none;
		box-shadow: 0 0 3px rgba(74, 144, 226, 0.4);
	}
}

.btn {
	width: 100%;
	padding: 12px;
	background: #4a90e2;
	color: #fff;
	font-size: 16px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	margin-top: 8px;
	transition: background 0.2s ease;
	
	&:hover
	{
		background: #3c7bc0;
	}
	
	&:disabled
	{
		background: #dddddd;
	}
}

DIV.row
{
	display: flex;
	gap: 10px;
	align-items: flex-start;
    justify-content: space-between;
	
	&.mid
	{
		align-items: center;
	}

	&.sep
	{
		margin: 10px 0px;
	}

	.minWidth
	{
		flex: 0;
	}
	
	.maxWidth
	{
		flex: 1;
	}
}

.formError 
{
	padding: 3px 8px;
	margin-top: 5px;
	border-radius: 6px;
	font-size: 12px;
	border: 2px solid transparent;
	background: #fdecec;
	color: #8a1f1f;
	border-color: #f5c2c2;
}

.fieldError
{
	position: absolute;
	right: 5px;
	margin-top: 1px;
	z-index: 1;
	
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;

	align-content: flex-end;
	
	&:before
	{
		height: 0px;
		width:  0px;
				
		position: absolute;
		right: 10px;

		content: "\00a0"; 

		border-width: 0px 6px 6px 6px;
		border-style: solid;
		border-color: transparent transparent #f5c2c2 transparent;
	}
	
	SPAN
	{
		padding: 3px 8px;
		margin-top: 5px;
		border-radius: 6px;
		font-size: 12px;
		border: 2px solid transparent;
		background: #fdecec;
		color: #8a1f1f;
		border-color: #f5c2c2;
	}
}

/* === Pages =============================================================================== */

H1
{
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: 32px;
	border-bottom: 1px solid #dddddd;
	margin: 2px 5px 5px 5px;
	padding: 0px 5px 5px 5px;
}

.subtitle
{
	margin: 0px 10px 10px 10px;
	color: #666666;
}

H2
{
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
	font-size: 20px;
	border-bottom: 1px solid #dddddd;
	margin: 2px 5px 5px 5px;
	padding: 0px 5px 5px 5px;
}

.nameValues
{
    display: inline-block;
    margin: 5px 5px 10px 10px;
    padding: 5px 10px;
	
	DIV
	{
		margin: 5px 0px;
	}
	
	LABEL
	{
		display: block;
		color: #999999;
		cursor: inherit;
	}
	
	SPAN
	{
		display: block;
		color: #000000;
		margin: 2px 0px 0px 10px;
	}
	
	UL
	{
		margin-left: 20px;
	}
}

.card
{
	border: 1px solid #999999;
	border-radius: 5px;
    background-color: #ffffff;
	filter: drop-shadow(3px 3px 2px black);
}
.card.selectable
{
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.card.selectable:hover
{
	background-color: #f5f5ff;	
}
.card.selectable.selected
{
	background-color: #eeeeff;
}

DIV.toolCard
{
	background-image: url(/static/img/n8n_logo.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: right 5px top 5px;

	width: 200px;
}

DIV.tokenCard
{
	background-image: url(/static/img/monday_logo.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: right 5px top 5px;
}

DIV.tokenApp
{
	border: 1px solid #999999;
	border-radius: 5px;
	margin: 10px 5px 0px 10px;
	padding: 2px 5px;

	DIV
	{
		margin: 3px;
	}
}

DIV.newToken
{
    width: 135px;
    margin: 15px 10px;
	padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
	
	&:before
	{
		filter: grayscale(1);
		content: '➕';
	}
}

DIV.step
{
	padding-left: 20px;
}





TABLE.simpleGrid
{
	width: 100%;
	border-collapse: collapse;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 14px;
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);

	thead
	{
		background: linear-gradient(to bottom, #ccccff, #eeeeff);
	}

	th
	{
		text-align: left;
		padding: 12px 14px;
		font-weight: 600;
		color: #2c3e50;
		border-bottom: 1px solid #e5e7eb;
		cursor: pointer;
		user-select: none;
		position: relative;
		transition: background 0.2s ease;
	}
	
	th:hover
	{
		background: linear-gradient(to bottom, #ddddff, #eeeeff);;
	}

	th.asc::after
	{
		content: "▲";
		font-size: 10px;
		position: absolute;
		right: 12px;
		color: #3b82f6;
	}

	th.desc::after
	{
		content: "▼";
		font-size: 10px;
		position: absolute;
		right: 12px;
		color: #3b82f6;
	}

	td
	{
		padding: 12px 14px;
		border-bottom: 1px solid #f0f0f0;
		color: #374151;
		transition: background 0.15s ease;
		
		*
		{
			margin: 0px;
		}
		
	}

	td[colspan]
	{
		text-align: center;
	}

	tbody 
	{
		tr:nth-child(even)
		{
			background: #fafafa;
		}

		tr:hover
		{
			background: #f1f5f9;
		}

		tr:last-child td
		{
			border-bottom: none;
		}
	}
}


DIV.chatHost
{
	display: flex;
	flex-direction: column;
	width: 800px;

	.messages
	{
		display: flex;
		flex-direction: column;
		
		height: 400px;
		overflow-y: auto;
		
		border: 1px solid #dddddd;
		border-radius: 10px;
		padding: 5px;
		
		.item
		{
			border: 1px solid #000000;
			border-radius: 5px;
			padding: 5px;
			margin: 5px;
			
            display: flex;
            gap: 5px;
            align-items: center;
			
			max-width: 90%;

			.ext
			{
				UL { margin: 5px 5px 5px 20px; }
				LI { margin: 3px 0px 2px 5px; }
			}
		}
		
		.question:before
		{
			content: '🧠';
			font-size: 20px;
		}
		.answer:after
		{
			content: '🤖';
			font-size: 20px;
		}
	}
	
	.query
	{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 5px;
		margin: 5px 0px 0px 0px;
		padding: 5px;
		border: 1px solid #dddddd;
		border-radius: 5px;

		TEXTAREA
		{
			flex: 1;
			resize: vertical;
			border: 1px solid #dddddd;
			min-height: 40px;
			max-height: 100px;
			padding: 5px;
		}
		
		BUTTON 
		{
			margin: 0px;
			flex: 0;
		}
	}
}



DIV.colSelector
{
	> *
	{
		height: 300px;
	}
	
	select
	{
		overflow-y: auto;
	}
	
	DIV
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}



MAIN.container
{
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    line-height: 1.6;
	
	text-align: center;
	
	IMG.logo
	{
		width: 50%;
	}

	DIV.divider
	{
		margin: 15px auto 15px auto;
		width: 80%;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(15, 23, 42, .12), transparent);
	}

	P
	{
	    margin: 0 auto 18px;
		max-width: 68ch;
		color: #64748b;
		font-size: 18px;
	}
}

DIV.pricing
{
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: center;

	.planCard
	{
		background: white;
		padding: 40px 30px;
		border-radius: 12px;
		box-shadow: 0 10px 25px rgba(0,0,0,0.08);
		width: 300px;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		
		cursor: default;
	
		&:hover
		{
			transform: translateY(-8px);
			box-shadow: 0 15px 35px rgba(0,0,0,0.12);
		}
		
		.title
		{
			font-size: 1.5rem;
			margin-bottom: 15px;
		}

		.price
		{
			font-size: 2.5rem;
			margin: 20px 0;
			color: #5555ff;
			
			span
			{
				font-size: 1rem;
				color: #666666;
			}
		}
		
		ul
		{
			list-style: none;
			margin: 25px 0;
			text-align: left;

			li
			{
				margin-bottom: 12px;
				padding-left: 20px;
				position: relative;
				
				&:before
				{
					content: "✓";
					position: absolute;
					left: 0;
					color: #5555ff;
					font-weight: bold;
				}
			}
		}
	}
}