Update style.css

style.css

@@ -119,21 +119,74 @@ h2 {
     color: #555;
 }
 
-/* استایل پیام های وضعیت (مثل در حال بارگذاری) */
-.status-message {
+/* ****** استایل پیام های وضعیت و خطا (شامل رنگ ها و اسپینر) ****** */
+.status-message, .error-message {
     font-weight: bold;
     margin-bottom: 15px;
     text-align: center;
-    color: #555;
+    padding: 10px; /* کمی فاصله داخلی */
+    border-radius: 5px; /* گوشه های گرد */
+    display: none; /* مخفی پیش فرض - توسط JS نمایش داده می شود */
+    /* استفاده از Flexbox برای مرکز قرار دادن محتوا (متن و اسپینر) */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px; /* فاصله بین متن و اسپینر */
+}
+
+/* رنگ ها و حاشیه ها بر اساس وضعیت */
+.status-message {
+     border: 1px solid #ddd; /* حاشیه پیش فرض */
+     color: #666; /* رنگ متن پیش فرض */
+     background-color: #e9e9e9; /* پس زمینه پیش فرض */
 }
-/* استایل پیام های خطا (مثل لطفا کتاب انتخاب کنید) */
+
+.status-message.loading {
+    border-color: #e74c3c; /* حاشیه قرمز برای وضعیت بارگذاری */
+    color: #c0392b; /* متن قرمز تیره */
+    background-color: #f9ebea; /* پس زمینه بسیار روشن قرمز */
+}
+
+.status-message.ready {
+    border-color: #2ecc71; /* حاشیه سبز برای وضعیت آماده */
+    color: #229954; /* متن سبز تیره */
+    background-color: #e9f7ef; /* پس زمینه بسیار روشن سبز */
+}
+
 .error-message {
-    font-weight: bold;
-    margin-bottom: 15px;
-    text-align: center;
-    color: red; /* رنگ قرمز برای خطاها */
+     /* از کلاس error-message در HTML برای المان selectionError استفاده می شود */
+    border-color: #e74c3c; /* حاشیه قرمز برای خطا */
+    color: red; /* متن قرمز */
+    background-color: #ffebeb; /* پس زمینه بسیار روشن قرمز */
+}
+
+
+/* ****** استایل لودینگ اسپینر ****** */
+.loading-spinner {
+  display: inline-block;
+  width: 15px; /* اندازه اسپینر */
+  height: 15px;
+  border: 3px solid rgba(0, 0, 0, 0.3); /* حاشیه خاکستری نیمه شفاف */
+  border-radius: 50%; /* گرد کردن */
+  border-top-color: #3498db; /* رنگ بخش بالایی برای افکت چرخش */
+  animation: spin 1s ease-in-out infinite; /* اعمال انیمیشن */
+  /* margin-left: 8px; -- منتقل شده به gap در فلکس باکس والد */
+  /* vertical-align: middle; -- منتقل شده به align-items در فلکس باکس والد */
+  display: none; /* پیش فرض مخفی */
 }
 
+/* تعریف انیمیشن چرخش */
+@keyframes spin {
+  to { transform: rotate(360deg); } /* چرخش 360 درجه */
+}
+
+/* نمایش اسپینر فقط زمانی که المان والد وضعیت 'loading' دارد */
+.status-message.loading .loading-spinner {
+    display: inline-block;
+}
+/* ****************************************************** */
+
+
 /* استایل بخش نمایش نتایج */
 #searchResults {
     margin-top: 20px;
@@ -150,8 +203,6 @@ h2 {
     padding: 15px; /* پدینگ داخلی */
     margin-bottom: 15px;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
-    /* position: relative; */ /* دیگر برای دکمه کپی نیاز نیست */
-    /* padding-bottom: 40px; */ /* دیگر برای دکمه کپی position absolute نیاز نیست */
 }
 
 /* استایل پاراگراف های درون آیتم نتیجه */
@@ -192,7 +243,6 @@ h2 {
     float: right; /* نمایش امتیاز در سمت راست */
     margin-right: 10px; /* فاصله از سمت راست */
     direction: ltr; /* برای نمایش عدد شباهت از چپ به راست */
-    /* clear: both; */ /* ممکن است نیاز نباشد اگر دکمه در انتها باشد */
 }
 
 /* استایل بخش توضیحی */
@@ -216,7 +266,7 @@ h2 {
 /* استایل برای متن بولد در بخش توضیحی */
 .explanation-text strong {
     font-weight: bold; /* اطمینان از اعمال استایل بولد */
-    color: #333; /* رنگ متن بولد را هم تنظیم کنید اگر می خواهید متفاوت باشد از رنگ پیش فرض #555 */
+    color: #333; /* رنگ متن بولد را هم تنظیم کنید اگر می خواهید متفاوت باشد */
 }
 
 
@@ -241,13 +291,12 @@ h2 {
     font-size: 0.85em;
     font-family: 'Vazirmatn', sans-serif;
     transition: background-color 0.2s ease;
-    /* ****** استایل برای چیدمان بلوکی و نمایش در انتهای آیتم نتیجه ****** */
+    /* استایل برای چیدمان بلوکی و نمایش در انتهای آیتم نتیجه */
     display: block; /* دکمه به صورت یک بلوک جداگانه ��مایش داده می شود */
     margin-top: 15px; /* فاصله از عنصرهای بالا */
     width: fit-content; /* عرض دکمه به اندازه محتوای آن باشد */
     margin-left: auto; /* در چیدمان راست به چپ (RTL)، این باعث می شود دکمه به سمت چپ منتقل شود */
     margin-right: 0; /* اطمینان از اینکه حاشیه راست صفر است */
-    /* ****************************************************************** */
 }
 
 .copy-button:hover {