Update src/App.css

src/App.css

@@ -1,38 +1,361 @@
 .App {
-  text-align: center;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  transition: background-color 0.3s ease;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.App.dark {
+  background-color: #0a0a0a;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+/* shadcn-like styles */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  border: 1px solid #e4e4e7;
+  background: #ffffff;
+  color: #09090b;
+  padding: 8px 16px;
+  cursor: pointer;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.btn:hover {
+  background: #f4f4f5;
+  border-color: #d4d4d8;
+}
+
+.btn.primary {
+  background: #18181b;
+  color: #ffffff;
+  border-color: #18181b;
+}
+
+.btn.primary:hover {
+  background: #27272a;
+  border-color: #27272a;
+}
+
+.btn.ghost {
+  border: 1px solid transparent;
+  background: transparent;
+}
+
+.btn.ghost:hover {
+  background: #f4f4f5;
+}
+
+.dark .btn {
+  background: #27272a;
+  color: #ffffff;
+  border-color: #3f3f46;
+}
+
+.dark .btn:hover {
+  background: #3f3f46;
+  border-color: #52525b;
+}
+
+.dark .btn.primary {
+  background: #ffffff;
+  color: #09090b;
+  border-color: #ffffff;
+}
+
+.dark .btn.primary:hover {
+  background: #f4f4f5;
+  border-color: #f4f4f5;
+}
+
+.dark .btn.ghost:hover {
+  background: #3f3f46;
+}
+
+.input {
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid #e4e4e7;
+  background: #ffffff;
+  padding: 12px 16px;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  color: #09090b;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #18181b;
+  box-shadow: 0 0 0 1px #18181b;
+}
+
+.dark .input {
+  background: #27272a;
+  border-color: #3f3f46;
+  color: #ffffff;
+}
+
+.dark .input:focus {
+  border-color: #ffffff;
+  box-shadow: 0 0 0 1px #ffffff;
+}
+
+.card {
+  background: #ffffff;
+  border: 1px solid #e4e4e7;
+  border-radius: 12px;
+  padding: 24px;
+  transition: all 0.2s ease;
+}
+
+.dark .card {
+  background: #18181b;
+  border-color: #3f3f46;
+}
+
+/* Main app layout */
+.chat-container {
+  flex: 1;
   display: flex;
   flex-direction: column;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+  padding: 20px;
+  gap: 20px;
+}
+
+.header {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  justify-content: space-between;
+  padding: 16px 0;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.theme-toggle {
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 20px 0;
+  max-height: calc(100vh - 280px);
+}
+
+.message {
+  display: flex;
+  gap: 16px;
+  max-width: 100%;
+}
+
+.message.user {
+  justify-content: flex-end;
 }
 
-.App-link {
-  color: #61dafb;
+.message-content {
+  max-width: 70%;
+  padding: 16px 20px;
+  border-radius: 18px;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+.message.assistant .message-content {
+  background: #f4f4f5;
+  color: #09090b;
+  border-bottom-left-radius: 4px;
+}
+
+.dark .message.assistant .message-content {
+  background: #27272a;
+  color: #ffffff;
+}
+
+.message.user .message-content {
+  background: #18181b;
+  color: #ffffff;
+  border-bottom-right-radius: 4px;
+}
+
+.dark .message.user .message-content {
+  background: #ffffff;
+  color: #09090b;
+}
+
+.input-container {
+  position: relative;
+  margin-top: auto;
+}
+
+.chat-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.chat-input {
+  resize: none;
+  min-height: 150px;
+  max-height: 200px;
+  padding: 16px 50px 16px 16px;
+  line-height: 1.5;
+}
+
+.model-selector {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  z-index: 10;
+}
+
+.send-button {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  padding: 8px;
+  border-radius: 8px;
+  background: #18181b;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.dark .send-button {
+  background: #ffffff;
+  color: #09090b;
+}
+
+.send-button:hover {
+  transform: scale(1.05);
+}
+
+.send-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.welcome-message {
+  text-align: center;
+  padding: 60px 20px;
+  color: #71717a;
+}
+
+.dark .welcome-message {
+  color: #a1a1aa;
+}
+
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 16px 20px;
+  background: #f4f4f5;
+  border-radius: 18px;
+  border-bottom-left-radius: 4px;
+  max-width: 70%;
+}
+
+.dark .typing-indicator {
+  background: #27272a;
+}
+
+.typing-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #71717a;
+  animation: typing-bounce 1.4s infinite ease-in-out;
+}
+
+.dark .typing-dot {
+  background: #a1a1aa;
+}
+
+.typing-dot:nth-child(1) { animation-delay: -0.32s; }
+.typing-dot:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes typing-bounce {
+  0%, 80%, 100% {
+    transform: scale(0.8);
+    opacity: 0.5;
   }
-  to {
-    transform: rotate(360deg);
+  40% {
+    transform: scale(1);
+    opacity: 1;
   }
 }
+
+/* Dropdown styles */
+.dropdown {
+  position: relative;
+}
+
+.dropdown-content {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 8px;
+  background: #ffffff;
+  border: 1px solid #e4e4e7;
+  border-radius: 8px;
+  padding: 8px;
+  min-width: 200px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.dark .dropdown-content {
+  background: #27272a;
+  border-color: #3f3f46;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s ease;
+}
+
+.dropdown-item:hover {
+  background: #f4f4f5;
+}
+
+.dark .dropdown-item:hover {
+  background: #3f3f46;
+}
+
+.dropdown-item.active {
+  background: #18181b;
+  color: #ffffff;
+}
+
+.dark .dropdown-item.active {
+  background: #ffffff;
+  color: #09090b;
+}