Mirxa1/continue-completing-ustmgsfezh

1/* SoulSync Global Styles */2@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');3 4* {5    margin: 0;6    padding: 0;7    box-sizing: border-box;8}9 10body {11    font-family: 'Inter', sans-serif;12    background: linear-gradient(135deg, #0f172a 0%, #111827 50%, #1f2937 100%);13    min-height: 100vh;14}15 16/* Custom scrollbar */17::-webkit-scrollbar {18    width: 6px;19}20 21::-webkit-scrollbar-track {22    background: #1f2937;23}24 25::-webkit-scrollbar-thumb {26    background: linear-gradient(45deg, #d946ef, #8b5cf6);27    border-radius: 3px;28}29 30/* Animations */31@keyframes float {32    0%, 100% { transform: translateY(0px); }33    50% { transform: translateY(-10px); }34}35 36@keyframes glow {37    0%, 100% { box-shadow: 0 0 20px rgba(217, 70, 239, 0.3); }38    50% { box-shadow: 0 0 40px rgba(217, 70, 239, 0.6); }39}40 41@keyframes pulse-glow {42    0%, 100% { opacity: 1; }43    50% { opacity: 0.7; }44}45 46.floating {47    animation: float 3s ease-in-out infinite;48}49 50.glow {51    animation: glow 2s ease-in-out infinite alternate;52}53 54.pulse-glow {55    animation: pulse-glow 2s ease-in-out infinite;56}57 58/* Chat bubble animations */59.chat-bubble {60    transform-origin: left bottom;61    animation: messageAppear 0.3s ease-out;62}63 64@keyframes messageAppear {65    from {66        opacity: 0;67        transform: scale(0.8) translateY(10px);68    }69    to {70        opacity: 1;71        transform: scale(1) translateY(0);72    }73}74 75/* Voice recording animation */76.voice-recording {77    animation: voicePulse 1.5s ease-in-out infinite;78}79 80@keyframes voicePulse {81    0%, 100% { transform: scale(1); opacity: 1; }82    50% { transform: scale(1.05); opacity: 0.8; }83}84 85/* Typing indicator */86.typing-dot {87    animation: typingAnimation 1.4s infinite ease-in-out;88}89 90.typing-dot:nth-child(1) { animation-delay: -0.32s; }91.typing-dot:nth-child(2) { animation-delay: -0.16s; }92 93@keyframes typingAnimation {94    0%, 80%, 100% { transform: scale(0); }95    40% { transform: scale(1); }96}97 98/* Gradient text */99.gradient-text {100    background: linear-gradient(45deg, #d946ef, #8b5cf6);101    -webkit-background-clip: text;102    -webkit-text-fill-color: transparent;103    background-clip: text;104}105 106/* Glass morphism effect */107.glass {108    background: rgba(255, 255, 255, 0.05);109    backdrop-filter: blur(10px);110    border: 1px solid rgba(255, 255, 255, 0.1);111}112 113/* Button hover effects */114.btn-primary {115    background: linear-gradient(45deg, #d946ef, #8b5cf6);116    transition: all 0.3s ease;117}118 119.btn-primary:hover {120    transform: translateY(-2px);121    box-shadow: 0 10px 25px rgba(217, 70, 239, 0.3);122}123 124/* Progress bar animation */125.progress-fill {126    transition: width 0.5s ease-in-out;127}128 129/* Emotional state indicators */130.emotion-happy { color: #10b981; }131.emotion-neutral { color: #6b7280; }132.emotion-sad { color: #ef4444; }133.emotion-excited { color: #f59e0b; }134.emotion-calm { color: #3b82f6; }135 136/* RTL support for Arabic */137[dir="rtl"] .chat-bubble-user {138    transform-origin: right bottom;139}140 141/* Mobile optimizations */142@media (max-width: 768px) {143    .mobile-padding {144        padding-left: 1rem;145        padding-right: 1rem;146    }147}148 149/* Dark mode enhancements */150.dark-mode-toggle {151    transition: all 0.3s ease;152}153 154.dark-mode-toggle:hover {155    transform: rotate(12deg);156}157 158/* Subscription tier cards */159.tier-card {160    transition: all 0.3s ease;161    border: 2px solid transparent;162}163 164.tier-card:hover {165    border-color: #d946ef;166    transform: translateY(-5px);167}168 169/* Loading spinner */170.loading-spinner {171    animation: spin 1s linear infinite;172}173 174@keyframes spin {175    from { transform: rotate(0deg); }176    to { transform: rotate(360deg); }177}178 179/* Voice waveform */180.voice-wave {181    animation: wave 1.5s infinite ease-in-out;182}183 184.voice-wave:nth-child(2) { animation-delay: -0.3s; }185.voice-wave:nth-child(3) { animation-delay: -0.6s; }186.voice-wave:nth-child(4) { animation-delay: -0.9s; }187 188@keyframes wave {189    0%, 100% { transform: scaleY(0.3); }190    50% { transform: scaleY(1); }191}192 193/* Accessibility improvements */194@media (prefers-reduced-motion: reduce) {195    * {196        animation-duration: 0.01ms !important;197        animation-iteration-count: 1 !important;198        transition-duration: 0.01ms !important;199    }200}