newhacks.css

:root {
	--bg: #e8ffdb;
	--card: #f7fff8;
	--muted: #6b7280;
	--primary: #097538; 
	--primary-600: #1e40af;
	--accent: #1081b9; 
	--glass: rgba(255,255,255,0.6);
	--radius-lg: 12px;
	--radius-md: 8px;
	--max-width: 880px;
}

/* Load Poppins from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

* { box-sizing: border-box; }
html,body { height: auto; }
body {
	margin: 0;
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	background: linear-gradient(180deg, #f8fafc 0%, var(--bg) 50%);
	color: #0f172a;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	/* Ensure the page can scroll when content is taller than the viewport.
		 The HTML uses Tailwind classes that make the body a flex container and
		 center items; override that to allow vertical scrolling on small screens. */
	/* Remove centering flex behavior (comes from Tailwind `flex items-center h-screen`) so
	   the document can grow and scroll. We keep min-height to preserve full-viewport look. */
	display: block !important;
	min-height: 100vh;
	height: auto !important;
	align-items: normal !important;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

/* Container */
.chat-container {
	max-width: var(--max-width);
	margin: 0 auto;
	background: linear-gradient(180deg, rgba(255,255,255,0.95), var(--card));
	border-radius: calc(var(--radius-lg) + 2px);
	box-shadow: 0 8px 30px rgba(15,23,42,0.08);
	overflow: visible; /* allow the document to scroll if content grows */
	display: flex;
	flex-direction: column;
	max-height: 92vh; /* limit visual height but don't lock it to viewport height */
	min-height: 60vh;
}

/* Header */
header {
	padding: 18px 20px;
	background: linear-gradient(90deg, rgba(37,99,235,0.03), rgba(16,185,129,0.02));
}
header h1 { margin: 0; font-size: 1.25rem; letter-spacing: -0.2px; }
header p { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }

/* Panels */
#persistent-form, #session-form {
	padding: 12px 14px;
	border-radius: var(--radius-md);
	border: 1px solid rgba(15,23,42,0.03);
}

/* Inputs */
input[type="text"], input[type="number"], textarea, select {
	background: linear-gradient(180deg, #ffffff, #fbfdff);
	border-radius: 10px;
	padding: 10px 12px;
	border: 1px solid #e6eef8;
	box-shadow: 0 1px 0 rgba(16,24,40,0.02) inset;
	font-size: 0.96rem;
	transition: box-shadow 150ms ease, transform 120ms ease, border-color 150ms ease;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: rgba(37,99,235,0.9);
	box-shadow: 0 6px 18px rgba(37,99,235,0.08);
	transform: translateY(-1px);
}

/* Buttons */
button {
	border: 0;
	cursor: pointer;
	border-radius: 10px;
}
.bg-blue-600, .btn-primary {
	background: linear-gradient(180deg, var(--primary), var(--primary-600));
	color: #fff;
}
.btn-soft {
	background: linear-gradient(180deg, #f8fafc, #ffffff);
	border: 1px solid rgba(15,23,42,0.04);
	color: #07203a;
}

/* Chat history area */
#chat-history {
	padding: 18px 22px;
	gap: 14px;
	background: linear-gradient(180deg, rgba(250,250,252,0.7), rgba(255,255,255,0.6));
	overflow-y: auto; /* allow internal scrolling if chat content grows */
}

/* Message bubbles */
.chat-container .message {
	max-width: 86%;
	padding: 12px 14px;
	border-radius: 14px;
	line-height: 1.45;
	font-size: 0.98rem;
	transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease;
}
.chat-container .message:hover { transform: translateY(-3px); }

/* AI bubble */
.chat-container div.ai-message, .chat-container .ai-message {
	background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
	color: #0b1220 !important;
	border: 1px solid rgba(15,23,42,0.05) !important;
	box-shadow: 0 4px 18px rgba(2,6,23,0.04) !important;
	border-top-left-radius: 6px !important;
	align-self: flex-start !important;
	position: relative;
}
.chat-container .ai-message::after {
	content: "";
	position: absolute;
	left: -8px;
	top: 10px;
	width: 0; height: 0;
	border-top: 8px solid transparent;
	border-right: 8px solid rgba(255,255,255,1);
}

/* User bubble */
.chat-container div.user-message, .chat-container .user-message {
	background: linear-gradient(180deg, var(--primary), var(--primary-600)) !important;
	color: white !important;
	align-self: flex-end !important;
	border-top-right-radius: 6px !important;
	box-shadow: 0 10px 30px rgba(37,99,235,0.12) !important;
	position: relative;
}
.chat-container .user-message::after {
	content: "";
	position: absolute;
	right: -8px;
	top: 10px;
	width: 0; height: 0;
	border-top: 8px solid transparent;
	border-left: 8px solid rgba(37,99,235,1);
}

/* Loading indicator and minor UI */
#loading-indicator { padding: 8px 12px; }

/* Input form at bottom — keep it sticky-ish */
#chat-form {
	padding: 14px 16px;
	background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95));
	border-top: 1px solid rgba(15,23,42,0.03);
}
#chat-form input[type="text"] { min-height: 44px; }
#chat-form button { min-width: 84px; min-height: 44px; }

/* Subtle hover states for primary actions */
#generate-schedule:hover, #save-preferences:hover, #send-button:hover {
	transform: translateY(-1px);
	filter: saturate(1.05);
}

/* Scrollbar styling */
#chat-history::-webkit-scrollbar { width: 10px; }
#chat-history::-webkit-scrollbar-track { background: transparent; }
#chat-history::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#d1d5db,#94a3b8); border-radius: 99px; }

/* Make the persistent status small and pleasant */
#persistent-status { font-size: 0.82rem; }

/* Responsive tweaks */
@media (max-width: 640px) {
	.chat-container { height: auto !important; border-radius: 0; max-height: none; }
	header h1 { font-size: 1.05rem; }
	#chat-history { padding: 12px; }
	#persistent-form, #session-form { padding: 10px; }
}

/* Accessibility: visible focus */
button:focus, input:focus, select:focus, textarea:focus {
	box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

/* Small utilities */
.muted { color: var(--muted); }
.caps { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; }

/* Print friendly */
@media print {
	body { background: white; }
	.chat-container { box-shadow: none; }
}

/* End of stylesheet */