Add global styles and layout for the app

frontend/src/App.css

@@ -1 +1,255 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #1a1a2e;
+  min-height: 100vh;
+}
+
+.app-container {
+  display: flex;
+  height: 100vh;
+  background: #1a1a2e;
+}
+
+.sidebar {
+  width: 300px;
+  background: #16213e;
+  border-right: 1px solid #0f3460;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-history {
+  height: 100%;
+}
+
+.new-chat-btn {
+  width: 100%;
+  padding: 12px;
+  background: #0f3460;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  margin-bottom: 16px;
+  transition: background 0.3s;
+}
+
+.new-chat-btn:hover {
+  background: #1a5f7a;
+}
+
+.chat-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.chat-item {
+  padding: 12px;
+  background: #0f3460;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  text-align: left;
+  transition: background 0.2s;
+}
+
+.chat-item:hover {
+  background: #1a5f7a;
+}
+
+.chat-item.active {
+  background: #e94560;
+}
+
+.chat-window {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.initial-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  text-align: center;
+}
+
+.initial-menu h1 {
+  color: white;
+  font-size: 2.5em;
+  margin-bottom: 12px;
+}
+
+.initial-menu p {
+  color: #a0a0a0;
+  font-size: 16px;
+  margin-bottom: 32px;
+}
+
+.example-buttons {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+  max-width: 600px;
+}
+
+.example-btn {
+  padding: 12px 16px;
+  background: #0f3460;
+  color: white;
+  border: 1px solid #e94560;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.3s;
+}
+
+.example-btn:hover {
+  background: #e94560;
+  transform: translateY(-2px);
+}
+
+.message {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.message.user {
+  justify-content: flex-end;
+}
+
+.message.assistant {
+  justify-content: flex-start;
+}
+
+.avatar {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.message .content {
+  max-width: 600px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  line-height: 1.5;
+}
+
+.message.user .content {
+  background: #0f3460;
+  color: white;
+}
+
+.message.assistant .content {
+  background: #e94560;
+  color: white;
+}
+
+.message.error .content {
+  background: #ff6b6b;
+  color: white;
+}
+
+.message.loading {
+  color: #a0a0a0;
+  font-style: italic;
+}
+
+.input-area {
+  display: flex;
+  gap: 12px;
+  padding: 16px 24px;
+  border-top: 1px solid #0f3460;
+}
+
+.input-area input {
+  flex: 1;
+  padding: 12px 16px;
+  background: #0f3460;
+  color: white;
+  border: 1px solid #1a5f7a;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+}
+
+.input-area input:focus {
+  outline: none;
+  border-color: #e94560;
+}
+
+.input-area input::placeholder {
+  color: #666;
+}
+
+.input-area button {
+  padding: 12px 24px;
+  background: #e94560;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background 0.2s;
+}
+
+.input-area button:hover {
+  background: #d63550;
+}
+
+.input-area button:disabled {
+  background: #666;
+  cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+  .app-container {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    max-height: 200px;
+    border-right: none;
+    border-bottom: 1px solid #0f3460;
+  }
+
+  .example-buttons {
+    grid-template-columns: 1fr;
+  }
+
+  .message .content {
+    max-width: 100%;
+  }
+}