Update src/App.css

src/App.css

@@ -24,6 +24,7 @@
   color: #09090b;
   padding: 8px 16px;
   cursor: pointer;
+  gap: 8px;
 }
 
 .btn:hover {
@@ -91,7 +92,6 @@
 .input:focus {
   outline: none;
   border-color: #18181b;
-  box-shadow: 0 0 0 1px #18181b;
 }
 
 .dark .input {
@@ -102,7 +102,6 @@
 
 .dark .input:focus {
   border-color: #ffffff;
-  box-shadow: 0 0 0 1px #ffffff;
 }
 
 .card {
@@ -176,6 +175,7 @@
   border-radius: 18px;
   font-size: 14px;
   line-height: 1.5;
+  white-space: pre-wrap;
 }
 
 .message.assistant .message-content {
@@ -225,6 +225,11 @@
   left: 12px;
   bottom: 12px;
   z-index: 10;
+  margin-left: 20px;
+  width: 167px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .send-button {
@@ -238,6 +243,11 @@
   border: none;
   cursor: pointer;
   transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
 }
 
 .dark .send-button {
@@ -320,7 +330,9 @@
   border: 1px solid #e4e4e7;
   border-radius: 8px;
   padding: 8px;
-  min-width: 200px;
+  min-width: 320px;
+  max-height: 400px;
+  overflow-y: auto;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   z-index: 1000;
 }
@@ -331,15 +343,41 @@
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }
 
-.dropdown-item {
+.company-section {
+  margin-bottom: 12px;
+}
+
+.company-header {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
+  font-weight: 600;
+  font-size: 14px;
+  color: #09090b;
+  border-bottom: 1px solid #f4f4f5;
+  margin-bottom: 8px;
+}
+
+.dark .company-header {
+  color: #ffffff;
+  border-bottom-color: #3f3f46;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
   border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
   transition: background-color 0.2s ease;
+  margin-bottom: 4px;
+}
+
+.dropdown-item:last-child {
+  margin-bottom: 0;
 }
 
 .dropdown-item:hover {
@@ -358,4 +396,164 @@
 .dark .dropdown-item.active {
   background: #ffffff;
   color: #09090b;
+}
+
+.model-info {
+  flex: 1;
+}
+
+.model-name {
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.model-description {
+  font-size: 12px;
+  opacity: 0.7;
+  line-height: 1.4;
+}
+
+.model-check {
+  display: flex;
+  align-items: center;
+  margin-top: 2px;
+}
+
+/* Auth Modal */
+.auth-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  padding: 20px;
+}
+
+.auth-content {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 32px;
+  max-width: 480px;
+  width: 100%;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
+}
+
+.dark .auth-content {
+  background: #18181b;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+}
+
+.auth-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.auth-description {
+  text-align: center;
+  color: #71717a;
+  margin-bottom: 24px;
+  line-height: 1.5;
+}
+
+.dark .auth-description {
+  color: #a1a1aa;
+}
+
+.auth-input {
+  margin-bottom: 20px;
+}
+
+.auth-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.auth-actions .btn {
+  flex: 1;
+}
+
+.token-info {
+  background: #f4f4f5;
+  border-radius: 8px;
+  padding: 16px;
+  margin-top: 16px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.dark .token-info {
+  background: #27272a;
+}
+
+.token-info h4 {
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.token-info ol {
+  padding-left: 16px;
+}
+
+.token-info li {
+  margin-bottom: 4px;
+}
+
+/* Error message */
+.error-message {
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #dc2626;
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.dark .error-message {
+  background: #2a0f0f;
+  border-color: #7f1d1d;
+  color: #fca5a5;
+}
+
+/* Token display */
+.token-display {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #f4f4f5;
+  border-radius: 6px;
+  font-size: 12px;
+  margin-bottom: 16px;
+}
+
+.dark .token-display {
+  background: #27272a;
+}
+
+.token-text {
+  flex: 1;
+  font-family: 'Geist Mono', monospace;
+  word-break: break-all;
+}
+
+.clear-token {
+  padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.clear-token:hover {
+  background: #e4e4e7;
+}
+
+.dark .clear-token:hover {
+  background: #3f3f46;
 }