Spaces:
Running
Running
Mujhe chat GPT ki tarah ek app banakar do jo ki superfast Ho chat gpt se bhi jyada advance
42e4d80 verified | /* Custom styles and animations */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4b5563; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #6b7280; | |
| } | |
| /* Message animations */ | |
| .message-enter { | |
| animation: messageEnter 0.3s ease-out; | |
| } | |
| @keyframes messageEnter { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Typing indicator */ | |
| .typing-indicator { | |
| display: flex; | |
| align-items: center; | |
| padding: 1rem; | |
| background: #374151; | |
| border-radius: 1rem; | |
| width: fit-content; | |
| } | |
| .typing-indicator span { | |
| height: 8px; | |
| width: 8px; | |
| background-color: #9ca3af; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin: 0 2px; | |
| animation: typing 1.4s infinite ease-in-out both; | |
| } | |
| .typing-indicator span:nth-child(1) { | |
| animation-delay: -0.32s; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation-delay: -0.16s; | |
| } | |
| @keyframes typing { | |
| 0%, 80%, 100% { | |
| transform: scale(0.8); | |
| opacity: 0.5; | |
| } | |
| 40% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| /* Quick action buttons */ | |
| .quick-action-btn { | |
| background: linear-gradient(135deg, #374151 0%, #4b5563 100%); | |
| border: 1px solid #6b7280; | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| color: white; | |
| } | |
| .quick-action-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| border-color: #3b82f6; | |
| } | |
| /* Suggestion chips */ | |
| .suggestion-chip { | |
| background: #374151; | |
| border: 1px solid #4b5563; | |
| border-radius: 9999px; | |
| padding: 0.5rem 1rem; | |
| font-size: 0.875rem; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .suggestion-chip:hover { | |
| background: #4b5563; | |
| border-color: #3b82f6; | |
| } | |
| /* Gradient text */ | |
| .gradient-text { | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Pulse animation for AI avatar */ | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: .5; | |
| } | |
| } | |
| /* Message bubbles */ | |
| .user-message { | |
| background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); | |
| border-radius: 1rem 1rem 0 1rem; | |
| padding: 1rem; | |
| max-width: 80%; | |
| word-wrap: break-word; | |
| } | |
| .ai-message { | |
| background: #374151; | |
| border-radius: 1rem 1rem 1rem 0; | |
| padding: 1rem; | |
| max-width: 80%; | |
| word-wrap: break-word; | |
| } | |
| /* Code blocks */ | |
| .code-block { | |
| background: #1f2937; | |
| border: 1px solid #374151; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| margin: 1rem 0; | |
| overflow-x: auto; | |
| } | |
| .code-block code { | |
| color: #f3f4f6; | |
| font-family: 'Fira Code', 'Courier New', monospace; | |
| } | |
| /* Image previews */ | |
| .image-preview { | |
| max-width: 300px; | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 640px) { | |
| .user-message, .ai-message { | |
| max-width: 90%; | |
| } | |
| .quick-action-btn { | |
| padding: 1rem; | |
| } | |
| } |