Add static and templates folders with their content

static/css/style.css

@@ -0,0 +1,898 @@
+:root {
+  /* Colors */
+  --color-background: rgba(252, 252, 249, 1);
+  --color-surface: rgba(255, 255, 253, 1);
+  --color-text: rgba(19, 52, 59, 1);
+  --color-text-secondary: rgba(98, 108, 113, 1);
+  --color-primary: rgba(33, 128, 141, 1);
+  --color-primary-hover: rgba(29, 116, 128, 1);
+  --color-primary-active: rgba(26, 104, 115, 1);
+  --color-secondary: rgba(94, 82, 64, 0.12);
+  --color-secondary-hover: rgba(94, 82, 64, 0.2);
+  --color-secondary-active: rgba(94, 82, 64, 0.25);
+  --color-border: rgba(94, 82, 64, 0.2);
+  --color-btn-primary-text: rgba(252, 252, 249, 1);
+  --color-card-border: rgba(94, 82, 64, 0.12);
+  --color-card-border-inner: rgba(94, 82, 64, 0.12);
+  --color-error: rgba(192, 21, 47, 1);
+  --color-success: rgba(33, 128, 141, 1);
+  --color-warning: rgba(168, 75, 47, 1);
+  --color-info: rgba(98, 108, 113, 1);
+  --color-focus-ring: rgba(33, 128, 141, 0.4);
+  --color-select-caret: rgba(19, 52, 59, 0.8);
+
+  /* Common style patterns */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for opacity control */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+
+  /* Typography */
+  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 24px;
+  --font-size-4xl: 30px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 600;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --letter-spacing-tight: -0.01em;
+
+  /* Spacing */
+  --space-0: 0;
+  --space-1: 1px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-base: 8px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
+
+  /* Animation */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Layout */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+}
+
+/* Dark mode colors */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: rgba(31, 33, 33, 1);
+    --color-surface: rgba(38, 40, 40, 1);
+    --color-text: rgba(245, 245, 245, 1);
+    --color-text-secondary: rgba(167, 169, 169, 0.7);
+    --color-primary: rgba(50, 184, 198, 1);
+    --color-primary-hover: rgba(45, 166, 178, 1);
+    --color-primary-active: rgba(41, 150, 161, 1);
+    --color-secondary: rgba(119, 124, 124, 0.15);
+    --color-secondary-hover: rgba(119, 124, 124, 0.25);
+    --color-secondary-active: rgba(119, 124, 124, 0.3);
+    --color-border: rgba(119, 124, 124, 0.3);
+    --color-error: rgba(255, 84, 89, 1);
+    --color-success: rgba(50, 184, 198, 1);
+    --color-warning: rgba(230, 129, 97, 1);
+    --color-info: rgba(167, 169, 169, 1);
+    --color-focus-ring: rgba(50, 184, 198, 0.4);
+    --color-btn-primary-text: rgba(19, 52, 59, 1);
+    --color-card-border: rgba(119, 124, 124, 0.2);
+    --color-card-border-inner: rgba(119, 124, 124, 0.15);
+    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    --button-border-secondary: rgba(119, 124, 124, 0.2);
+    --color-border-secondary: rgba(119, 124, 124, 0.2);
+    --color-select-caret: rgba(245, 245, 245, 0.8);
+
+    /* RGB versions for dark mode */
+    --color-success-rgb: 50, 184, 198;
+    --color-error-rgb: 255, 84, 89;
+    --color-warning-rgb: 230, 129, 97;
+    --color-info-rgb: 167, 169, 169;
+  }
+}
+
+/* Base styles */
+html {
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  background-color: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+h1 { font-size: var(--font-size-4xl); }
+h2 { font-size: var(--font-size-3xl); }
+h3 { font-size: var(--font-size-2xl); }
+h4 { font-size: var(--font-size-xl); }
+h5 { font-size: var(--font-size-lg); }
+h6 { font-size: var(--font-size-md); }
+
+p {
+  margin: 0 0 var(--space-16) 0;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-16);
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-base);
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+  border: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.btn--primary {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+}
+
+.btn--primary:hover {
+  background: var(--color-primary-hover);
+}
+
+.btn--primary:active {
+  background: var(--color-primary-active);
+}
+
+.btn--secondary {
+  background: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.btn--secondary:hover {
+  background: var(--color-secondary-hover);
+}
+
+.btn--secondary:active {
+  background: var(--color-secondary-active);
+}
+
+.btn--outline {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+.btn--outline:hover {
+  background: var(--color-secondary);
+}
+
+.btn--sm {
+  padding: var(--space-4) var(--space-12);
+  font-size: var(--font-size-sm);
+  border-radius: var(--radius-sm);
+}
+
+.btn--lg {
+  padding: var(--space-10) var(--space-20);
+  font-size: var(--font-size-lg);
+  border-radius: var(--radius-md);
+}
+
+.btn--full-width {
+  width: 100%;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn i {
+  margin-right: var(--space-4);
+}
+
+.btn:last-child i,
+.btn--sm i {
+  margin-right: 0;
+}
+
+/* Form elements */
+.form-control {
+  display: block;
+  width: 100%;
+  padding: var(--space-8) var(--space-12);
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
+}
+
+select.form-control {
+  padding: var(--space-8) var(--space-12);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: var(--select-caret-light);
+  background-repeat: no-repeat;
+  background-position: right var(--space-12) center;
+  background-size: 16px;
+  padding-right: var(--space-32);
+}
+
+@media (prefers-color-scheme: dark) {
+  select.form-control {
+    background-image: var(--select-caret-dark);
+  }
+}
+
+.form-control:focus {
+  border-color: var(--color-primary);
+  outline: var(--focus-outline);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: var(--space-8);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.form-group {
+  margin-bottom: var(--space-16);
+}
+
+/* Card component */
+.card {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-card-border);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  transition: box-shadow var(--duration-normal) var(--ease-standard);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.card__body {
+  padding: var(--space-16);
+}
+
+.card__header {
+  padding: var(--space-16);
+  border-bottom: 1px solid var(--color-card-border-inner);
+}
+
+/* Container layout */
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--space-16);
+  padding-left: var(--space-16);
+}
+
+@media (min-width: 640px) { .container { max-width: var(--container-sm); } }
+@media (min-width: 768px) { .container { max-width: var(--container-md); } }
+@media (min-width: 1024px) { .container { max-width: var(--container-lg); } }
+@media (min-width: 1280px) { .container { max-width: var(--container-xl); } }
+
+/* Utility classes */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.gap-4 { gap: var(--space-4); }
+.gap-8 { gap: var(--space-8); }
+.gap-16 { gap: var(--space-16); }
+
+.mb-8 { margin-bottom: var(--space-8); }
+.block { display: block; }
+.hidden { display: none; }
+
+/* Accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+/* Custom styles building on the design system */
+.app-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, var(--color-background) 0%, var(--color-surface) 100%);
+}
+
+/* Header Styles */
+.header {
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-16) 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+}
+
+.logo {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
+  margin: 0;
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.tagline {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Main Content Layout */
+.main-content {
+  flex: 1;
+  padding: var(--space-24) var(--space-16);
+}
+
+.content-wrapper {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: var(--space-24);
+  height: calc(100vh - 200px);
+  max-height: 800px;
+}
+
+/* Sidebar Styles */
+.sidebar {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-card-border);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-20);
+  overflow-y: auto;
+  height: fit-content;
+  max-height: 100%;
+}
+
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-20);
+  padding-bottom: var(--space-12);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.sidebar-header h3 {
+  color: var(--color-primary);
+  margin: 0;
+}
+
+.sidebar-section {
+  margin-bottom: var(--space-24);
+}
+
+.sidebar-section h4 {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+  margin-bottom: var(--space-12);
+}
+
+.sidebar-section:last-child {
+  margin-bottom: 0;
+}
+
+/* Quick Queries */
+.quick-queries {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.query-btn {
+  background: var(--color-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  padding: var(--space-8) var(--space-12);
+  text-align: left;
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
+  transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.query-btn:hover {
+  background: var(--color-secondary-hover);
+  transform: translateY(-1px);
+}
+
+/* Chat Area */
+.chat-area {
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-card-border);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+
+.chat-container {
+  flex: 1;
+  padding: var(--space-20);
+  overflow-y: auto;
+  min-height: 400px;
+  max-height: calc(100vh - 300px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+
+/* Message Bubbles */
+.message {
+  display: flex;
+  margin-bottom: var(--space-16);
+  animation: fadeInUp 0.3s ease-out;
+}
+
+.message.user {
+  justify-content: flex-end;
+}
+
+.message.bot {
+  justify-content: flex-start;
+}
+
+.message-bubble {
+  max-width: 70%;
+  padding: var(--space-12) var(--space-16);
+  border-radius: var(--radius-lg);
+  position: relative;
+  box-shadow: var(--shadow-sm);
+}
+
+.message.user .message-bubble {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+  border-bottom-right-radius: var(--radius-sm);
+}
+
+.message.bot .message-bubble {
+  background: var(--color-secondary);
+  color: var(--color-text);
+  border-bottom-left-radius: var(--radius-sm);
+}
+
+.message-content {
+  margin: 0;
+  line-height: var(--line-height-normal);
+}
+
+.message-time {
+  font-size: var(--font-size-xs);
+  opacity: 0.7;
+  margin-top: var(--space-4);
+}
+
+.message-actions {
+  display: flex;
+  gap: var(--space-8);
+  margin-top: var(--space-8);
+}
+
+.copy-btn {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: var(--font-size-xs);
+  padding: var(--space-2);
+  border-radius: var(--radius-sm);
+  transition: color var(--duration-fast);
+}
+
+.copy-btn:hover {
+  color: var(--color-text);
+}
+
+/* Typing Indicator */
+.typing-indicator {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: var(--space-16);
+}
+
+.typing-bubble {
+  background: var(--color-secondary);
+  padding: var(--space-12) var(--space-16);
+  border-radius: var(--radius-lg);
+  border-bottom-left-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.typing-dots {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.typing-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-text-secondary);
+  animation: typingDots 1.4s infinite ease-in-out;
+}
+
+.typing-dot:nth-child(1) { animation-delay: -0.32s; }
+.typing-dot:nth-child(2) { animation-delay: -0.16s; }
+
+/* Chat Input */
+.chat-input-container {
+  padding: var(--space-20);
+  border-top: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+
+.input-wrapper {
+  display: flex;
+  gap: var(--space-12);
+  align-items: flex-end;
+}
+
+.input-wrapper .form-control {
+  flex: 1;
+  resize: none;
+  min-height: 44px;
+  max-height: 120px;
+}
+
+#send-btn {
+  flex-shrink: 0;
+  height: 44px;
+  width: 44px;
+  border-radius: 50%;
+  padding: 0;
+}
+
+/* Welcome Message */
+.welcome-message {
+  text-align: center;
+  color: var(--color-text-secondary);
+  padding: var(--space-32);
+}
+
+.welcome-message h3 {
+  color: var(--color-primary);
+  margin-bottom: var(--space-16);
+}
+
+.welcome-message ul {
+  text-align: left;
+  max-width: 400px;
+  margin: var(--space-16) auto;
+}
+
+/* Footer */
+.footer {
+  background: var(--color-surface);
+  border-top: 1px solid var(--color-border);
+  padding: var(--space-16) 0;
+  margin-top: auto;
+}
+
+.footer p {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.footer a {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+}
+
+.footer a:hover {
+  color: var(--color-primary);
+}
+
+/* Modal Styles */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.modal.show {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.modal-content {
+  max-width: 500px;
+  width: 90%;
+  margin: var(--space-20);
+  animation: slideInUp 0.3s ease-out;
+}
+
+.modal-close {
+  cursor: pointer;
+}
+
+/* Responsive Design */
+.mobile-only {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .content-wrapper {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+  
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: -100%;
+    width: 280px;
+    height: 100vh;
+    z-index: 200;
+    transition: left var(--duration-normal) var(--ease-standard);
+    border-radius: 0;
+    border-right: 1px solid var(--color-border);
+    border-top: none;
+    border-left: none;
+    border-bottom: none;
+  }
+  
+  .sidebar.show {
+    left: 0;
+  }
+  
+  .mobile-only {
+    display: inline-flex;
+  }
+  
+  .tagline {
+    display: none;
+  }
+  
+  .chat-container {
+    min-height: 300px;
+    max-height: calc(100vh - 250px);
+  }
+  
+  .message-bubble {
+    max-width: 85%;
+  }
+}
+
+/* Animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(30px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes typingDots {
+  0%, 80%, 100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Scrollbar Styling */
+.chat-container::-webkit-scrollbar,
+.sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-container::-webkit-scrollbar-track,
+.sidebar::-webkit-scrollbar-track {
+  background: var(--color-secondary);
+  border-radius: var(--radius-sm);
+}
+
+.chat-container::-webkit-scrollbar-thumb,
+.sidebar::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-sm);
+}
+
+.chat-container::-webkit-scrollbar-thumb:hover,
+.sidebar::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
+}
+
+/* Status indicators */
+.status-online {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  font-size: var(--font-size-sm);
+  color: var(--color-success);
+}
+
+.status-online::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  background: var(--color-success);
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--color-success-rgb), 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(var(--color-success-rgb), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--color-success-rgb), 0);
+  }
+}
+
+/* Focus states for accessibility */
+.query-btn:focus-visible,
+#chat-input:focus-visible,
+#syllabus-select:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+/* Loading state */
+.loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+/* Error states */
+.error-message {
+  color: var(--color-error);
+  font-size: var(--font-size-sm);
+  margin-top: var(--space-4);
+}
+
+/* Success states */
+.success-message {
+  color: var(--color-success);
+  font-size: var(--font-size-sm);
+  margin-top: var(--space-4);
+}

static/js/app.js

@@ -0,0 +1,342 @@
+// CCET Chatbot Application JavaScript
+
+class CCETChatbot {
+    constructor() {
+        this.chatContainer = document.getElementById('chat-container');
+        this.chatInput = document.getElementById('chat-input');
+        this.sendBtn = document.getElementById('send-btn');
+        this.sidebar = document.getElementById('sidebar');
+        this.toggleSidebarBtn = document.getElementById('toggle-sidebar');
+        this.closeSidebarBtn = document.getElementById('close-sidebar');
+        this.clearChatBtn = document.getElementById('clear-chat');
+        this.helpBtn = document.getElementById('help-btn');
+        this.helpModal = document.getElementById('help-modal');
+        this.syllabusSelect = document.getElementById('syllabus-select');
+        this.downloadSyllabusBtn = document.getElementById('download-syllabus');
+        
+        this.conversationHistory = [];
+        this.isTyping = false;
+        
+        // Syllabus URLs
+        this.syllabusUrls = {
+            'cse': 'https://ccet.ac.in/pdf/CSE_syllabus_2025.pdf',
+            'mechanical': 'https://ccet.ac.in/pdf/Mech_syll2024-28.pdf',
+            'ece': 'https://ccet.ac.in/pdf/ECE_SYLLABUS_2024-28.pdf',
+            'civil': 'https://ccet.ac.in/pdf/Civil_syllabus2024-28.pdf'
+        };
+        
+        this.init();
+    }
+    
+    init() {
+        this.bindEvents();
+        this.showWelcomeMessage();
+    }
+    
+    bindEvents() {
+        // Chat input events
+        this.sendBtn.addEventListener('click', () => this.sendMessage());
+        this.chatInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.sendMessage();
+            }
+        });
+        
+        // Sidebar events
+        this.toggleSidebarBtn?.addEventListener('click', () => this.toggleSidebar());
+        this.closeSidebarBtn?.addEventListener('click', () => this.closeSidebar());
+        
+        // Quick query buttons
+        const queryButtons = document.querySelectorAll('.query-btn');
+        queryButtons.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const query = btn.getAttribute('data-query');
+                this.chatInput.value = query;
+                this.sendMessage();
+            });
+        });
+        
+        // Syllabus download
+        this.syllabusSelect.addEventListener('change', () => {
+            this.downloadSyllabusBtn.disabled = !this.syllabusSelect.value;
+        });
+        
+        this.downloadSyllabusBtn.addEventListener('click', () => this.downloadSyllabus());
+        
+        // Clear chat
+        this.clearChatBtn.addEventListener('click', () => this.clearChat());
+        
+        // Help modal
+        this.helpBtn.addEventListener('click', () => {
+            this.helpModal.classList.add('show');
+        });
+        
+        // Modal close events
+        const modalCloseButtons = document.querySelectorAll('.modal-close');
+        modalCloseButtons.forEach(btn => {
+            btn.addEventListener('click', () => {
+                this.helpModal.classList.remove('show');
+            });
+        });
+        
+        // Close modal on backdrop click
+        this.helpModal.addEventListener('click', (e) => {
+            if (e.target === this.helpModal) {
+                this.helpModal.classList.remove('show');
+            }
+        });
+        
+        // Close sidebar on outside click (mobile)
+        document.addEventListener('click', (e) => {
+            if (window.innerWidth <= 768 && 
+                this.sidebar.classList.contains('show') && 
+                !this.sidebar.contains(e.target) && 
+                !this.toggleSidebarBtn.contains(e.target)) {
+                this.closeSidebar();
+            }
+        });
+    }
+    
+    showWelcomeMessage() {
+        const welcomeHtml = `
+            <div class="welcome-message">
+                <h3>Welcome to CCET Chatbot Assistant! 🎓</h3>
+                <p>I'm here to help you with information about Chandigarh College of Engineering and Technology.</p>
+                <p><strong>I can help you with:</strong></p>
+                <ul>
+                    <li>Admission process and requirements</li>
+                    <li>Fee structure and payment details</li>
+                    <li>Placement information and statistics</li>
+                    <li>Hostel facilities and accommodation</li>
+                    <li>Academic calendar and schedules</li>
+                    <li>Contact information and general queries</li>
+                </ul>
+                <p>Use the sidebar for quick access to portals and syllabus downloads, or start typing your question below!</p>
+                <div class="status-online">Bot is online</div>
+            </div>
+        `;
+        this.chatContainer.innerHTML = welcomeHtml;
+    }
+    
+    async sendMessage() {
+        const message = this.chatInput.value.trim();
+        if (!message || this.isTyping) return;
+        
+        this.addMessage(message, 'user');
+        this.chatInput.value = '';
+        this.conversationHistory.push({ role: 'user', content: message });
+        
+        this.showTypingIndicator();
+        
+        try {
+            // Send message to Flask backend
+            const response = await fetch('/api/chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ message: message })
+            });
+            
+            const data = await response.json();
+            
+            this.hideTypingIndicator();
+            
+            if (response.ok) {
+                this.addMessage(data.answer, 'bot');
+                this.conversationHistory.push({ role: 'bot', content: data.answer });
+            } else {
+                this.addMessage('Sorry, I encountered an error. Please try again.', 'bot');
+                console.error('Error:', data.error);
+            }
+        } catch (error) {
+            this.hideTypingIndicator();
+            this.addMessage('Sorry, I\'m having trouble connecting. Please check your connection and try again.', 'bot');
+            console.error('Network error:', error);
+        }
+    }
+    
+    addMessage(content, sender) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender}`;
+        
+        const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        
+        messageDiv.innerHTML = `
+            <div class="message-bubble">
+                <div class="message-content">${content}</div>
+                <div class="message-time">${timestamp}</div>
+                ${sender === 'bot' ? `
+                    <div class="message-actions">
+                        <button class="copy-btn" onclick="app.copyMessage(this)" title="Copy message">
+                            <i class="fas fa-copy"></i>
+                        </button>
+                    </div>
+                ` : ''}
+            </div>
+        `;
+        
+        this.chatContainer.appendChild(messageDiv);
+        this.scrollToBottom();
+    }
+    
+    showTypingIndicator() {
+        this.isTyping = true;
+        const typingDiv = document.createElement('div');
+        typingDiv.className = 'typing-indicator';
+        typingDiv.id = 'typing-indicator';
+        typingDiv.innerHTML = `
+            <div class="typing-bubble">
+                <span>CCET Bot is typing</span>
+                <div class="typing-dots">
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                </div>
+            </div>
+        `;
+        this.chatContainer.appendChild(typingDiv);
+        this.scrollToBottom();
+    }
+    
+    hideTypingIndicator() {
+        this.isTyping = false;
+        const typingIndicator = document.getElementById('typing-indicator');
+        if (typingIndicator) {
+            typingIndicator.remove();
+        }
+    }
+    
+    scrollToBottom() {
+        this.chatContainer.scrollTop = this.chatContainer.scrollHeight;
+    }
+    
+    copyMessage(button) {
+        const messageContent = button.closest('.message-bubble').querySelector('.message-content').textContent;
+        navigator.clipboard.writeText(messageContent).then(() => {
+            const originalIcon = button.innerHTML;
+            button.innerHTML = '<i class="fas fa-check"></i>';
+            setTimeout(() => {
+                button.innerHTML = originalIcon;
+            }, 1000);
+        });
+    }
+    
+    toggleSidebar() {
+        this.sidebar.classList.add('show');
+    }
+    
+    closeSidebar() {
+        this.sidebar.classList.remove('show');
+    }
+    
+    downloadSyllabus() {
+        const selectedBranch = this.syllabusSelect.value;
+        if (!selectedBranch) return;
+        
+        const url = this.syllabusUrls[selectedBranch];
+        const branchNames = {
+            'cse': 'Computer Science Engineering',
+            'mechanical': 'Mechanical Engineering',
+            'ece': 'Electronics & Communication Engineering',
+            'civil': 'Civil Engineering'
+        };
+        
+        // Create a temporary link and click it to download
+        const link = document.createElement('a');
+        link.href = url;
+        link.target = '_blank';
+        link.download = `${branchNames[selectedBranch]}_Syllabus.pdf`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        
+        // Show success message
+        this.addMessage(`✅ Downloading ${branchNames[selectedBranch]} syllabus. The file will open in a new tab.`, 'bot');
+        
+        // Reset the select
+        this.syllabusSelect.value = '';
+        this.downloadSyllabusBtn.disabled = true;
+    }
+    
+    clearChat() {
+        if (confirm('Are you sure you want to clear the chat history?')) {
+            this.conversationHistory = [];
+            this.showWelcomeMessage();
+        }
+    }
+}
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.app = new CCETChatbot();
+});
+
+// Handle responsive behavior
+window.addEventListener('resize', () => {
+    if (window.innerWidth > 768) {
+        document.getElementById('sidebar').classList.remove('show');
+    }
+});
+
+// Prevent default form submission if any forms are added later
+document.addEventListener('submit', (e) => {
+    e.preventDefault();
+});
+
+// Add notification system
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.className = `notification notification--${type}`;
+    notification.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: var(--color-surface);
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-base);
+        padding: var(--space-12) var(--space-16);
+        box-shadow: var(--shadow-lg);
+        z-index: 1000;
+        animation: slideInRight 0.3s ease-out;
+        max-width: 300px;
+    `;
+    notification.textContent = message;
+    
+    document.body.appendChild(notification);
+    
+    setTimeout(() => {
+        notification.style.animation = 'slideOutRight 0.3s ease-out';
+        setTimeout(() => {
+            document.body.removeChild(notification);
+        }, 300);
+    }, 3000);
+}
+
+// Add CSS for notifications
+const notificationStyles = document.createElement('style');
+notificationStyles.textContent = `
+    @keyframes slideInRight {
+        from {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes slideOutRight {
+        from {
+            transform: translateX(0);
+            opacity: 1;
+        }
+        to {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+    }
+`;
+document.head.appendChild(notificationStyles);

templates/index.html

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CCET Chatbot Assistant</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Header -->
+        <header class="header">
+            <div class="container">
+                <div class="flex items-center justify-between">
+                    <div class="logo-container">
+                        <h1 class="logo">CCET</h1>
+                        <span class="tagline">Chandigarh College of Engineering and Technology</span>
+                    </div>
+                    <button id="toggle-sidebar" class="btn btn--secondary btn--sm mobile-only">
+                        <i class="fas fa-bars"></i> Quick Access
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <div class="main-content container">
+            <div class="content-wrapper">
+                <!-- Sidebar -->
+                <aside class="sidebar" id="sidebar">
+                    <div class="sidebar-header">
+                        <h3>Quick Access</h3>
+                        <button id="close-sidebar" class="btn btn--secondary btn--sm mobile-only">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    
+                    <div class="sidebar-section">
+                        <h4>Student Portals</h4>
+                        <a href="https://paydirect.eduqfix.com/app/3qTjKfysWsfqEyNTM4giVFX4VGVYGZss5NYRHpY65DaJgmu14S3Ff6NKoVa3l2Ay/6593" target="_blank" class="btn btn--primary btn--full-width mb-8">
+                            <i class="fas fa-credit-card"></i> Fees Portal
+                        </a>
+                        <a href="https://eakadamik.in/ccet/" target="_blank" class="btn btn--primary btn--full-width">
+                            <i class="fas fa-graduation-cap"></i> CCET Results
+                        </a>
+                    </div>
+                    
+                    <div class="sidebar-section">
+                        <h4>Download Syllabus</h4>
+                        <div class="form-group">
+                            <select id="syllabus-select" class="form-control">
+                                <option value="" selected disabled>Select Branch</option>
+                                <option value="cse">Computer Science Engineering</option>
+                                <option value="ece">Electronics & Communication Engineering</option>
+                                <option value="mechanical">Mechanical Engineering</option>
+                                <option value="civil">Civil Engineering</option>
+                            </select>
+                        </div>
+                        <button id="download-syllabus" class="btn btn--secondary btn--full-width" disabled>
+                            <i class="fas fa-download"></i> Download Syllabus
+                        </button>
+                    </div>
+                    
+                    <div class="sidebar-section">
+                        <h4>Common Queries</h4>
+                        <div class="quick-queries">
+                            <button class="query-btn" data-query="Tell me about admission process">Admission process</button>
+                            <button class="query-btn" data-query="What is the fee structure?">Fee structure</button>
+                            <button class="query-btn" data-query="Tell me about placements">Placement information</button>
+                            <button class="query-btn" data-query="How are the hostel facilities?">Hostel facilities</button>
+                            <button class="query-btn" data-query="When is the next academic calendar?">Academic calendar</button>
+                            <button class="query-btn" data-query="How can I contact the college?">Contact information</button>
+                        </div>
+                    </div>
+                    
+                    <div class="sidebar-section">
+                        <h4>Chat Actions</h4>
+                        <button id="clear-chat" class="btn btn--outline btn--full-width mb-8">
+                            <i class="fas fa-trash"></i> Clear Chat
+                        </button>
+                        <button id="help-btn" class="btn btn--outline btn--full-width">
+                            <i class="fas fa-question-circle"></i> Help
+                        </button>
+                    </div>
+                </aside>
+
+                <!-- Main Chat Area -->
+                <main class="chat-area">
+                    <div class="chat-container" id="chat-container">
+                        <!-- Chat messages will be displayed here -->
+                    </div>
+                    
+                    <div class="chat-input-container">
+                        <div class="input-wrapper">
+                            <input type="text" id="chat-input" class="form-control" placeholder="Type your message here...">
+                            <button id="send-btn" class="btn btn--primary">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
+                    </div>
+                </main>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <footer class="footer">
+            <div class="container">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p>&copy; 2025 Chandigarh College of Engineering and Technology</p>
+                    </div>
+                    <div class="flex gap-16">
+                        <a href="https://ccet.ac.in" target="_blank">Official Website</a>
+                        <a href="https://ccet.ac.in/contact-us" target="_blank">Contact</a>
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+        <!-- Help Modal -->
+        <div id="help-modal" class="modal">
+            <div class="modal-content card">
+                <div class="card__header">
+                    <div class="flex justify-between items-center">
+                        <h3>CCET Chatbot Help</h3>
+                        <button class="modal-close btn btn--secondary btn--sm"><i class="fas fa-times"></i></button>
+                    </div>
+                </div>
+                <div class="card__body">
+                    <h4>What can this chatbot do?</h4>
+                    <ul>
+                        <li>Answer questions about CCET college</li>
+                        <li>Provide information about admissions, placements, and facilities</li>
+                        <li>Help you access important portals and resources</li>
+                        <li>Download syllabus for different branches</li>
+                    </ul>
+                    
+                    <h4>Quick Tips</h4>
+                    <ul>
+                        <li>Use the sidebar for quick access to common resources</li>
+                        <li>Click on the "Quick Queries" buttons to ask common questions</li>
+                        <li>The chatbot remembers your conversation context</li>
+                        <li>Click "Clear Chat" to start a new conversation</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+</body>
+</html>