body {
		 font-family: "Google Sans Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: semibold; 
  transition: background-color 0.3s ease;
      
  }

	/* Pulse for "Active AI" */
		@keyframes pulse-gold { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
		.ai-pulse { animation: pulse-gold 2s infinite; }

		

	/* Scrollbar hiding */
		.no-scrollbar::-webkit-scrollbar { display: none; }
		.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

		
		textarea:focus, select:focus, button:focus {
			outline: none !important;
			box-shadow: none !important;
		}

		textarea::-webkit-scrollbar {
			width: 4px;
		}
		textarea::-webkit-scrollbar-thumb {
			background: rgba(155, 155, 155, 0.2);
			border-radius: 10px;
		}
		
		.rubik {
  font-family: "Rubik Mono One", monospace;
  font-weight: 400;
  font-style: normal;
}

.russo {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

		.lexend {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.geologica {
  font-family: "Geologica", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
	"slnt" 0,
	"CRSV" 0,
	"SHRP" 0;
}

.prompt {
  font-family: "Prompt", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.graycolor {

background-color: #f9faf9;
	
}

.cabin {
  font-family: "Cabin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
	"wdth" 100;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}
.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.welcome-text {
			font-size: 1.5rem;
			font-weight: 600;
			
		}
		.greeting-text {
			font-size: 1rem;
			font-weight: 400;
			
		}

	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');
		@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    --loader-color-light: rgba(255, 255, 255, 0.15);  /* More transparent for contrast */
    --loader-color-active: #ffffff;  /* Pure white for bright dot */
}

.loader10, .loader10:before, .loader10:after {
    width: 8px;  /* Slightly larger for better visibility */
    height: 8px;
    border-radius: 50%;
    -webkit-animation: loader10m 1.5s ease-in-out infinite;  /* Faster animation */
    animation: loader10m 1.5s ease-in-out infinite;
}

.loader10 {
    position: relative;
    background-color: var(--loader-color-light);
}

.loader10:before, .loader10:after {
    content: "";
    position: absolute;
    top: 0;
}

.loader10:before {
    left: -25px;
    -webkit-animation: loader10g 1.5s ease-in-out infinite;
    animation: loader10g 1.5s ease-in-out infinite;
}

.loader10:after {
    left: 25px;
    -webkit-animation: loader10d 1.5s ease-in-out infinite;
    animation: loader10d 1.5s ease-in-out infinite;
}

@keyframes loader10g {
    0%, 100% { background-color: var(--loader-color-light); }
    25% { background-color: var(--loader-color-active); }
    50%, 75% { background-color: var(--loader-color-light); }
}

@keyframes loader10m {
    0%, 100% { background-color: var(--loader-color-light); }
    50% { background-color: var(--loader-color-active); }
}

@keyframes loader10d {
    0%, 100% { background-color: var(--loader-color-light); }
    75% { background-color: var(--loader-color-active); }
}
		

		/* Pulse for "Active AI" */
		@keyframes pulse-gold { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
		.ai-pulse { animation: pulse-gold 2s infinite; }

		
		/* ========== INTEGRATED CONTENT FADE ANIMATION ========== */
		/* Main content container: smooth fade + transform transition */
		#content-container {
			transition: opacity 0.3s ease, transform 0.3s ease;
			opacity: 1;
			transform: translateY(0);
		}
		
		/* This class triggers the fade-out effect (loading out state) */
		.page-loading-out {
			opacity: 0 !important;
			transform: translateY(10px) !important;
		}

		/* Optional micro-spinner style */
		.ph-spin { animation: spin 1s linear infinite; display: inline-block; }
		@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
		button:disabled { opacity: 0.7; cursor: not-allowed; }
		.error-input { border: 2px solid #ef4444 !important; background-color: #fef2f2 !important; }
		
		/* Additional micro-interaction: prevent clicks during fade-out transition */
		.content-fade-transition {
			pointer-events: none;
		}
		
		#nav-sidebar {
			transition: transform 0.3s ease, opacity 0.3s ease;
		}
		
		#nav-sidebar.sidebar-slide-in {
			animation: slideIn 0.3s ease forwards;
		}
		
		#nav-sidebar.sidebar-slide-out {
			animation: slideOut 0.3s ease forwards;
		}
		
		@keyframes slideIn {
			from {
				transform: translateX(-100%);
				opacity: 0;
			}
			to {
				transform: translateX(0);
				opacity: 1;
			}
		}
		
		@keyframes slideOut {
			from {
				transform: translateX(0);
				opacity: 1;
			}
			to {
				transform: translateX(-100%);
				opacity: 0;
			}
		}
		
		/* Hide main content initially until data loads */
		#main-content-wrapper {
			
			transition: opacity 0.5s ease;
		}
		
		#main-content-wrapper.visible {
			opacity: 1;
		}
		
		/* Loading indicator container */
		#loading-indicator {
			transition: opacity 0.3s ease;
		}