@spacemade/ui 0.0.1

package/src/sass/layout/_base.scss

@@ -0,0 +1,937 @@
+/* 1. Simple CSS Reset */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+/* 2. Prevent body from scrolling if content fits */
+html,
+body,
+.body {
+	width: 100%;
+	height: 100%;
+}
+
+html,
+body {
+	overflow: hidden auto;
+}
+
+.icon-fw {
+  display: inline-block;
+  width: 1.25em; /* similar to icon-fw */
+  text-align: center;
+}
+
+#page-area {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	/* full viewport height */
+}
+
+/* 3. Root layout control */
+#__next {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+/* 4. Optional: Prevent text zoom on mobile double-tap */
+html {
+	-webkit-text-size-adjust: 100%;
+}
+
+.text-truncate {
+	@for $i from 2 through 6 {
+		&--max-lines-#{$i} {
+			@include max-lines($i);
+		}
+	}
+}
+
+/* Sidebar Styles */
+.sidebar {
+	&-column {
+		width: 240px;
+		transition: width 0.3s;
+		background-color: #fff;
+		border-right: 1px solid var(--bs-light-gray);
+		padding: 0;
+
+		&.collapsed {
+			width: 50px;
+
+			.sidebar-heading {
+				display: none;
+			}
+
+			.sidebar-link {
+				justify-content: center;
+
+				span {
+					display: none;
+				}
+			}
+
+			.expand-button {
+				opacity: 0;
+				visibility: hidden;
+				transition: opacity 0.2s ease, visibility 0.2s ease;
+			}
+
+			&:hover .expand-button {
+				opacity: 1;
+				visibility: visible;
+			}
+
+			/* Mobile specific styles */
+			@media (max-width: 767px) {
+				/* On mobile, don't show sidebar when collapsed */
+				display: none;
+			}
+		}
+
+		/* Mobile: sidebar is position fixed and full width when open */
+		@media (max-width: 767px) {
+			position: fixed;
+			top: 0;
+			left: 0;
+			height: 100vh;
+			width: 250px;
+			z-index: 1230;
+		}
+	}
+
+	&-heading {
+		font-size: 0.875rem;
+		text-transform: none;
+		color: var(--bs-dark-900);
+		font-weight: 700;
+		letter-spacing: normal;
+		margin: 0.75rem 0 0.5rem;
+		padding: 0 .75rem;
+	}
+
+	&-list {
+		display: flex;
+		flex-direction: column;
+		list-style: none;
+		padding: 0;
+		margin: 0;
+
+		.sidebar-item {
+			width: 100%;
+			font-weight: 400;
+			display: flex;
+			align-items: center;
+			border-radius: 0.45rem;
+			cursor: pointer;
+			transition: background-color 0.2s;
+
+			&:hover {
+				background-color: var(--bs-light-gray);
+			}
+
+			.sidebar-link {
+				display: flex;
+				align-items: center;
+				gap: 0.5rem;
+				width: 100%;
+				color: #212529;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				padding: 0.15rem .25rem;
+			}
+		}
+
+		.sidebar-search-wrapper {
+			padding: 0 0.75rem;
+			margin-bottom: 0.5rem;
+
+			input.form-control {
+				font-size: 0.875rem;
+			}
+		}
+	}
+}
+
+/* Logo Row Inside Sidebar - Enhanced */
+.logo-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	position: relative;
+	width: 100%;
+	margin-bottom: 0.5rem;
+	height: 48px;
+
+	&.logo-row-collapsed {
+		justify-content: center;
+
+		.logo-link {
+			z-index: 1;
+		}
+	}
+
+	.logo-link {
+		display: flex;
+		align-items: center;
+
+		img {
+			width: 24px;
+			height: 24px;
+		}
+	}
+
+	.collapse-button {
+		position: absolute;
+		right: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		min-width: 0;
+		height: auto;
+		width: auto;
+		background: none;
+		border: none;
+		box-shadow: none;
+		transition: background-color 0.2s ease;
+
+		i {
+			color: #212529;
+		}
+
+		&:hover {
+			background-color: rgba(184, 184, 184, 0.3);
+		}
+	}
+
+	.expand-button {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.5rem;
+		min-width: 0;
+		height: auto;
+		width: auto;
+		background: rgba(255, 255, 255, 0.95);
+		border: 1px solid #e5e7eb;
+		border-radius: 4px;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		cursor: pointer;
+		opacity: 0;
+		visibility: hidden;
+		transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
+		z-index: 2;
+
+		i {
+			color: #212529;
+			font-size: 14px;
+		}
+
+		&:hover {
+			background-color: #fbfbfb;
+			box-shadow: none;
+			border: none;
+		}
+	}
+
+	&.logo-row-collapsed {
+		&:hover {
+			.expand-button {
+				opacity: 1;
+				visibility: visible;
+				background-color: #fbfbfb;
+				box-shadow: none;
+				border: none;
+			}
+		}
+	}
+}
+
+/* Beat .chat-text h* rules that use rem */
+.agent-content .chat-text h1,
+.agent-content h1 { font-size: calc(1.5rem * 0.7) !important; }
+
+.agent-content .chat-text h2,
+.agent-content h2 { font-size: calc(1.25rem * 0.7) !important; }
+
+.agent-content .chat-text h3,
+.agent-content h3 { font-size: calc(1.125rem * 0.7) !important; }
+
+/* Optional: scale margins/borders used by your base.scss heading rules */
+.agent-content .chat-text h1,
+.agent-content h1 {
+  margin: calc(1rem * 0.7) 0 calc(0.5rem * 0.7) 0 !important;
+  padding-bottom: calc(0.25rem * 0.7) !important;
+  border-bottom-width: calc(2px * 0.7) !important;
+}
+
+/* Icons & emoji (font icons, Bootstrap .bi, SVG) */
+.agent-content i,
+.agent-content .bi,
+.agent-content svg { font-size: 70% !important; }
+
+.agent-content hr {
+  border: none; /* Remove default styles */
+  height: 1px; /* Slim line */
+  background-color: rgba(0, 0, 0, 0.1); /* Light gray */
+  margin: 0.75rem 0; /* Less vertical spacing */
+}
+
+#mainContentArea {
+	/* Mobile-first base style */
+	width: 100%;
+	height: 100%;
+	max-width: 100%;
+	box-sizing: border-box;
+
+	/* Align children to the top */
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start; /* pushes content to top */
+	align-items: flex-start;     /* aligns to left */
+}
+
+/* Medium breakpoint: tablets */
+@media screen and (min-width: 768px) {
+	#mainContentArea {
+		max-width: 720px;
+	}
+}
+
+/* Large breakpoint: small desktops */
+@media screen and (min-width: 992px) {
+	#mainContentArea {
+		max-width: 940px;
+	}
+}
+
+/* Extra large breakpoint: wide desktops */
+@media screen and (min-width: 1200px) {
+	#mainContentArea {
+		max-width: 1040px;
+	}
+}
+
+/* bootstrap-compatible helper */
+.min-h-0 {
+  min-height: 0 !important;
+}
+
+/* Chat Area Styles */
+.chat {
+	&-area {
+		padding: 0 2rem;
+	}
+
+	&--footer {
+		left: 10rem;
+		right: 10rem;
+
+		@include media-breakpoint-down(md) {
+			left: 0;
+			right: 0;
+		}
+
+		.d-flex:has(.sidebar-column:not(.collapsed)) & {
+			left: 25rem;
+		}
+	}
+
+	&-message {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+
+		&--user {
+			align-items: flex-end;
+		}
+
+		&--osirus {
+			align-items: flex-start;
+		}
+	}
+
+	&-bubble {
+		border-radius: 0.8rem;
+		gap: 0.25rem;
+		color: #000;
+
+		&--user {
+			background-color: var(--primary, #f5f5f5);
+			padding: 1rem;
+			// overflow-x: auto;
+			max-width: 80%;
+		}
+
+		&--osirus {
+			width: 100%;
+			padding: 0 !important;
+		}
+	}
+
+	&-text {
+		color: #1f2937;
+		word-wrap: break-word;
+		max-width: 100%;
+
+		p {
+			display: inline;
+			margin: 0;
+			padding: 0;
+		}
+
+		h1,
+		h2,
+		h3 {
+			font-weight: 600;
+			margin: 1rem 0 0.5rem;
+			color: #111827;
+		}
+
+		h1 {
+			font-size: 1.5rem;
+			border-bottom: 2px solid #e5e7eb;
+			padding-bottom: 0.25rem;
+		}
+
+		h2 {
+			font-size: 1.25rem;
+			border-bottom: 1px solid #e5e7eb;
+			padding-bottom: 0.25rem;
+		}
+
+		h3 {
+			font-size: 1.1rem;
+		}
+
+
+		h4 {
+			padding-top: 1rem;
+			font-size: 1rem;
+		}
+
+		h5 {
+			font-size: .85rem;
+		}
+
+		h6 {
+			font-size: .65rem;
+		}
+
+		ul {
+			list-style-type: disc;
+			padding: .1rem .25rem;
+		}
+
+		ol {
+			list-style-type: none;
+			margin: 1.5rem 0 1rem 0;
+			padding: 0;
+		}
+
+		li {
+			list-style-position: inside;
+			margin: 0;
+			padding: 0;
+			margin-bottom: .5em;
+			margin-top: .5em;
+
+			p {
+				display: inline;
+				margin: 0;
+				padding: 0;
+			}
+
+			>input[type="checkbox"] {
+				margin-right: 0.5rem;
+			}
+		}
+
+		a {
+			color: #3b82f6;
+			text-decoration: underline;
+
+			&:hover {
+				text-decoration: none;
+			}
+		}
+
+		blockquote {
+			margin: 1rem 0;
+			padding: 0.75rem 1rem;
+			background: #f3f4f6;
+			border-left: 4px solid #3b82f6;
+			color: #374151;
+			font-style: italic;
+		}
+
+		code,
+		pre {
+			font-family: 'Fira Code', 'Courier New', monospace;
+			border-radius: 0.25rem;
+		}
+
+		code {
+			padding: 0.15rem 0.4rem;
+			font-size: 0.95rem;
+		}
+
+		table {
+			width: 100%;
+			border-collapse: collapse;
+			margin: 1rem 0;
+
+			th,
+			td {
+				border: 1px solid #d1d5db;
+				padding: 0.5rem;
+				text-align: left;
+			}
+
+			th {
+				background: #f3f4f6;
+				font-weight: 600;
+			}
+		}
+
+		p:has(+ ul),
+		p:has(+ ol) {
+			margin-bottom: 0.25rem;
+		}
+	}
+}
+
+/* squash outer gaps so content growth is smoother */
+.chat-bubble .prose > :first-child { margin-top: 0 !important; }
+.chat-bubble .prose > :last-child  { margin-bottom: 0 !important; }
+
+/* smaller vertical rhythm inside bubbles */
+.chat-bubble .prose p   { margin-top: .25rem; margin-bottom: .25rem; }
+.chat-bubble .prose pre { margin-top: .25rem; margin-bottom: .25rem; }
+
+/* override highlight.js theme margin on code blocks, if present */
+.chat-bubble pre code { margin: 0 !important; }
+
+/* Keep code block box metrics constant while content grows */
+.chat-bubble .prose pre {
+  margin-top: .25rem !important;
+  margin-bottom: .25rem !important;
+  padding: .5rem .75rem !important;
+  line-height: 1.4 !important;
+  font-size: 0.95rem !important;
+  border-radius: .5rem;
+  overflow: auto;                 /* no wrap + scroll if needed */
+  white-space: pre;               /* avoid wrap reflows */
+  scrollbar-gutter: stable both-edges; /* prevent layout shift when scrollbar appears */
+  transition: none !important;    /* no animated margin/size changes */
+}
+
+/* Prevent highlight.js / prose from re-introducing margins inside */
+.chat-bubble .prose pre code {
+  display: block;                 /* avoid inline sizing quirks */
+  margin: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+  line-height: inherit !important;
+  font-size: inherit !important;
+}
+
+/* Inline code should not jump size relative to paragraph text */
+.chat-bubble .prose :not(pre) > code {
+  font-size: 0.95em !important;
+  line-height: inherit !important;
+  padding: 0 .25rem;
+  margin: 0;
+}
+
+/* Make sure first/last-child space doesn't add/remove on re-render */
+.chat-bubble .prose > :first-child { margin-top: 0 !important; }
+.chat-bubble .prose > :last-child  { margin-bottom: 0 !important; }
+
+/* Belt-and-suspenders: disable any CSS transitions inside code blocks */
+.chat-bubble .prose pre,
+.chat-bubble .prose pre *,
+.chat-bubble .prose code {
+  transition: none !important;
+}
+
+.thinking-bubble {
+  width: auto;        // override chat-bubble--osirus width: 100%
+  max-width: 100%;    // but never exceed the line
+  display: inline-flex;
+}
+
+#chat {
+	&-area {
+		height: 82vh;
+	}
+}
+
+.chat-actions {
+	margin: 0;
+	// border-top: 1px #ebebeb solid;
+	width: 100%;
+}
+
+.chat-actions .btn {
+	color: #6c757d;
+	font-size: 1rem;
+	padding: 0;
+	line-height: 1;
+	min-width: 0;
+	width: 0;
+}
+
+.chat-actions .btn:hover {
+	color: #212529;
+	background: transparent;
+}
+
+.chat-actions .btn:focus {
+	box-shadow: none;
+}
+
+/* Loader Animation */
+.loader {
+	border: 3px solid rgba(255, 255, 255, 0.3);
+	border-top: 3px solid #fff;
+	border-radius: 50%;
+	width: 16px;
+	height: 16px;
+	animation: spin 1s linear infinite;
+}
+
+.loader.small {
+	width: 12px;
+	height: 12px;
+	border-width: 2px;
+}
+
+/* Layout for loader + text inside bubble */
+.chat-bubble--osirus.d-flex {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+/* Loader Animation Keyframes */
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.osirus-image {
+  max-height: 40px;
+  width: auto;
+  object-fit: contain;
+  animation: spin 2s linear infinite;
+}
+
+.osirus-image-static {
+  max-height: 40px;
+  width: auto;
+  object-fit: contain;
+  animation: none;
+}
+
+p {
+	margin-top: 0;
+	margin-bottom: .75rem;
+}
+
+.visually-hidden {
+	position: absolute;
+	left: -10000px;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+
+select {
+	border-radius: 0;
+	background-color: white;
+}
+
+select:focus {
+	outline: none;
+	box-shadow: none;
+}
+
+.transition-background {
+	transition: background-image 0.5s ease-in-out;
+}
+
+/* Default: Mobile-first approach */
+// .unauthenticated-padding {
+// 	padding: 4rem .5rem 0;
+// }
+
+// .authenticated-padding {
+// 	padding: 0 1rem;
+// }
+
+/* Desktop styles */
+@media (min-width: 768px) {
+	.unauthenticated-padding {
+		// padding: 4rem 2.5rem 1rem;
+		max-width: 1200px;
+	}
+
+	.authenticated-padding {
+		padding: 0 3.5rem 0 2.5rem;
+	}
+
+	/* Desktop sidebar adjustments */
+	.sidebar-column {
+		position: relative !important;
+
+		&.collapsed {
+			display: block !important;
+		}
+	}
+
+}
+
+.extra-small-mobile-text {
+	font-size: 0.8rem;
+}
+
+@media (min-width: 768px) {
+	.extra-small-mobile-text {
+		font-size: 1rem;
+	}
+}
+
+.body {
+	position: relative;
+	z-index: 0;
+}
+
+#topNav {
+	position: relative;
+	width: 100%;
+	z-index: 1030;
+	background-color: #fff;
+	border-bottom: 1px solid #e6e8ec;
+}
+
+#topNav.top-nav-shell--pinned {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
+	animation: topNavFadeIn 180ms ease-out;
+}
+
+@keyframes topNavFadeIn {
+	from {
+		opacity: 0;
+		transform: translateY(-8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.top-nav-inner {
+	min-height: 60px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.75rem;
+	padding: 0.5rem 1.5rem;
+	overflow: visible;
+}
+
+.top-nav {
+	height: 60px;
+}
+
+.top-nav-left,
+.top-nav-right {
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+}
+
+.top-nav-left {
+	min-width: 2.5rem;
+}
+
+.top-nav-right {
+	min-width: 7rem;
+	justify-content: flex-end;
+}
+
+.top-nav-center {
+	flex: 1 1 auto;
+	min-width: 0;
+	justify-content: center;
+	overflow: visible;
+}
+
+.top-nav-links {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	white-space: nowrap;
+	gap: 1.75rem;
+	max-width: 100%;
+	overflow: visible;
+}
+
+.top-nav-link {
+	color: #4b5563;
+	font-size: 0.95rem;
+	font-weight: 500;
+	line-height: 1;
+	text-decoration: none;
+	padding: 0.2rem 0 0.55rem;
+	position: relative;
+	transition: color 0.2s ease;
+}
+
+.top-nav-dropdown {
+	position: relative;
+}
+
+.top-nav-dropdown-trigger {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.45rem;
+}
+
+.top-nav-dropdown-link,
+.top-nav-dropdown-toggle {
+	border: 0;
+	background: transparent;
+	color: inherit;
+	padding: 0;
+}
+.top-nav-shell--hero {
+	.top-nav-dropdown-link {
+		&:hover {
+			color: var(--bs-white);
+		}
+	}
+}
+.top-nav-dropdown-link {
+	text-decoration: none;
+}
+
+.top-nav-dropdown-toggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.top-nav-dropdown-icon {
+	font-size: 0.75rem;
+	transition: transform 0.2s ease;
+}
+
+.top-nav-dropdown.open .top-nav-dropdown-icon {
+	transform: rotate(180deg);
+}
+
+.top-nav-dropdown-menu {
+	position: absolute;
+	top: calc(100% + 0.6rem);
+	left: 0;
+	min-width: 13rem;
+	padding: 0.45rem;
+	border: 1px solid rgba(17, 24, 39, 0.08);
+	border-radius: 0.9rem;
+	background: #fff;
+	box-shadow: 0 18px 40px rgba(17, 24, 39, 0.14);
+	opacity: 0;
+	pointer-events: none;
+	transform: translateY(-6px);
+	transition: opacity 0.18s ease, transform 0.18s ease;
+	z-index: 1040;
+}
+
+.top-nav-dropdown.open .top-nav-dropdown-menu {
+	opacity: 1;
+	pointer-events: auto;
+	transform: translateY(0);
+}
+
+.top-nav-dropdown-item {
+	display: block;
+	padding: 0.7rem 0.9rem;
+	color: #374151;
+	font-size: 0.95rem;
+	font-weight: 500;
+	text-decoration: none;
+	transition: background-color 0.18s ease, color 0.18s ease;
+}
+
+.top-nav-dropdown-section-break {
+	display: block;
+	margin-bottom: 0.35rem;
+	padding-bottom: 0.35rem;
+	border-bottom: 1px solid rgba(17, 24, 39, 0.12);
+}
+
+.top-nav-dropdown-item:hover,
+.top-nav-dropdown-item.active {
+	background: rgba(74, 104, 216, 0.08);
+	color: #111827;
+}
+
+.top-nav-link:hover,
+.top-nav-link.active {
+	color: #111827;
+}
+
+.top-nav-link.active::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 3px;
+	border-radius: 999px;
+	background: #4a68d8;
+}
+
+.top-nav-user-float {
+	position: fixed;
+	top: 0.75rem;
+	right: 1rem;
+	z-index: 1035;
+}
+
+.page-content {
+	margin-top: 60px;
+}
+
+.btn-hover-primary:hover {
+	background-color: var(--bs-primary);
+}
+
+.btn-hover-primary:hover i {
+	color: var(--bs-white);
+}