Upload style.css with huggingface_hub

style.css

@@ -1,76 +1,96 @@
+/* Custom styles for enhanced UI */
 * {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    font-family: sans-serif;
+scrollbar-width: thin;
+scrollbar-color: #cbd5e1 #f1f5f9;
 }
 
-html,
-body {
-    height: 100%;
+*::-webkit-scrollbar {
+width: 8px;
 }
 
-body {
-    padding: 32px;
+*::-webkit-scrollbar-track {
+background: #f1f5f9;
+border-radius: 4px;
 }
 
-body,
-#container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+*::-webkit-scrollbar-thumb {
+background-color: #cbd5e1;
+border-radius: 4px;
 }
 
-#container {
-    position: relative;
-    gap: 0.4rem;
+*::-webkit-scrollbar-thumb:hover {
+background-color: #94a3b8;
+}
 
-    width: 640px;
-    height: 640px;
-    max-width: 100%;
-    max-height: 100%;
+/* Smooth transitions */
+.transition-all {
+transition-property: all;
+transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
 
-    border: 2px dashed #D1D5DB;
-    border-radius: 0.75rem;
-    overflow: hidden;
-    cursor: pointer;
-    margin: 1rem;
+/* Message animations */
+@keyframes fadeIn {
+from {
+opacity: 0;
+transform: translateY(10px);
+}
+to {
+opacity: 1;
+transform: translateY(0);
+}
+}
 
-    background-size: 100% 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-    font-size: 18px;
+#messagesArea > div {
+animation: fadeIn 0.3s ease-out;
 }
 
-#upload {
-    display: none;
+/* Typing indicator animation */
+@keyframes pulse {
+0%, 100% {
+opacity: 1;
+}
+50% {
+opacity: 0.5;
+}
 }
 
-svg {
-    pointer-events: none;
+.animate-pulse {
+animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-#example {
-    font-size: 14px;
-    text-decoration: underline;
-    cursor: pointer;
+/* Enhanced button styles */
+button:focus {
+outline: none;
+box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
 }
 
-#example:hover {
-    color: #2563EB;
+/* Textarea styles */
+textarea:focus {
+box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
 }
 
-.bounding-box {
-    position: absolute;
-    box-sizing: border-box;
-    border: solid 2px;
+/* Loading animation */
+@keyframes spin {
+to {
+transform: rotate(360deg);
+}
+}
+
+.animate-spin {
+animation: spin 1s linear infinite;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+.max-w-md {
+max-width: calc(100% - 3rem);
+}
 }
 
-.bounding-box-label {
-    color: white;
-    position: absolute;
-    font-size: 12px;
-    margin: -16px 0 0 -2px;
-    padding: 1px;
+/* Gradient text effect */
+.gradient-text {
+background: linear-gradient(to right, #a855f7, #ec4899);
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
+background-clip: text;
 }