style.css

/* تنظیمات عمومی برای فارسی */
body {
    font-family: 'Vazirmatn', sans-serif; /* استفاده از فونت وزیرمتن */
    line-height: 1.6; /* فاصله خطوط */
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4; /* رنگ پس زمینه ملایم */
    color: #333; /* رنگ متن اصلی */
    direction: rtl; /* جهت متن راست به چپ */
    text-align: right; /* تراز متن به راست */
}

/* کانتینر اصلی برای محدود کردن عرض و مرکز قرار دادن محتوا */
.container {
    max-width: 800px; /* حداکثر عرض کانتینر */
    margin: 20px auto; /* فاصله از بالا و پایین و مرکز افقی */
    background-color: #fff; /* رنگ پس زمینه کانتینر */
    padding: 30px; /* پدینگ داخلی */
    border-radius: 10px; /* گوشه های گرد */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* سایه ملایم */
}

/* استایل عنوان های اصلی */
h1 {
    color: #333;
    text-align: center; /* عنوان اصلی وسط چین */
    margin-bottom: 5px; /* کاهش فاصله بعد از عنوان اصلی */
}

/* استایل عنوان بخش ها (مثل جستجو در خاطرات) */
h2 {
     color: #333;
     text-align: right; /* عنوان بخش ها راست چین */
     margin-bottom: 20px;
}

/* استایل بخش های مختلف (انتخاب کتاب، جستجو، آستانه، نتایج در صفحه) */
.book-selection, .search-area, .results-per-page, .similarity-threshold-control {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #e9e9e9; /* رنگ پس زمینه ملایم برای بخش ها */
    border-radius: 8px; /* گوشه های گرد بخش ها */
    border: 1px solid #ddd; /* حاشیه بخش ها */
}

/* استایل لیبل های چک باکس */
.book-selection label {
    margin-left: 10px; /* فاصله بین لیبل و چک باکس در RTL */
}

/* استایل کادر ورودی جستجو */
.search-area input[type="text"] {
    width: calc(100% - 100px); /* عرض کادر ورودی منهای دکمه و فاصله */
    padding: 10px;
    margin-left: 10px; /* فاصله بین کادر و دکمه در RTL */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Vazirmatn', sans-serif; /* اعمال فونت */
    box-sizing: border-box; /* برای جلوگیری از سرریز شدن عرض */
    direction: rtl; /* برای تایپ فارسی */
}

/* استایل دکمه جستجو */
.search-area button {
    padding: 10px 20px;
    background-color: #5cb85c; /* رنگ سبز */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-family: 'Vazirmatn', sans-serif; /* اعمال فونت */
    transition: background-color 0.3s ease; /* انیمیشن تغییر رنگ */
}

/* استایل دکمه جستجو هنگام Hover */
.search-area button:hover:not(:disabled) {
    background-color: #4cae4c; /* سبز تیره تر */
}
/* استایل دکمه جستجو هنگام غیرفعال بودن */
.search-area button:disabled {
    background-color: #cccccc; /* خاکستری */
    cursor: not-allowed; /* نشانگر عدم اجازه */
}

/* استایل بخش انتخاب تعداد نتایج در صفحه */
.results-per-page label {
    margin-left: 10px;
}
.results-per-page select {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl; /* برای نمایش صحیح در فایرفاکس و برخی مرورگرها */
}

/* استایل بخش کنترل آستانه شباهت */
.similarity-threshold-control {
    text-align: center; /* وسط چین کردن محتوا */
}
.similarity-threshold-control label {
    margin-left: 10px;
}
.similarity-threshold-control input[type="number"] {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
    width: 80px; /* عرض مناسب برای نمایش عدد */
    text-align: center; /* وسط چین کردن متن درون کادر ورودی */
    font-family: 'Vazirmatn', sans-serif;
    direction: ltr; /* برای نمایش عدد از چپ به راست */
}
.similarity-threshold-control p {
    margin-top: 5px;
    font-size: 0.8em;
    color: #555;
}

/* ****** استایل پیام های وضعیت و خطا (شامل رنگ ها و اسپینر) ****** */
.status-message, .error-message {
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    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; /* پس زمینه بسیار روشن قرمز */
}

/* کلاس .ready برای زمانی که داده ها آماده جستجو هستند */
.status-message.ready {
    border-color: #2ecc71; /* حاشیه سبز برای وضعیت آماده */
    color: #229954; /* متن سبز تیره */
    background-color: #e9f7ef; /* پس زمینه بسیار روشن سبز */
}

/* کلاس .error برای پیام های خطا */
.error-message {
     /* از کلاس 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;
}
#searchResults p:first-child {
    text-align: center; /* پیام اولیه قبل از نمایش نتایج وسط چین باشد */
}

/* استایل هر آیتم نتیجه */
.result-item {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px; /* پدینگ داخلی */
    margin-bottom: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

/* استایل پاراگراف های درون آیتم نتیجه */
.result-item p {
    margin-bottom: 8px; /* فاصله بین پاراگراف های درون آیتم نتیجه */
    word-wrap: break-word; /* شکستن کلمات طولانی */
}

/* استایل متن اصلی خاطره */
.result-passage {
    font-size: 1em;
    color: #333;
    text-align: justify; /* متن خاطره تراز از دو طرف */
}

/* استایل مرجع خاطره */
.result-reference {
    font-size: 0.9em;
    color: #555;
    margin-top: 10px; /* کمی فاصله بیشتر بعد از متن خاطره */
    word-wrap: break-word; /* شکستن کلمات طولانی */
}

/* استایل نام کتاب */
.result-book-title {
    font-size: 0.85em;
    color: #777;
    font-style: italic; /* نام کتاب به صورت کج */
    margin-top: 5px; /* فاصله بعد از مرجع */
    word-wrap: break-word; /* شکستن کلمات طولانی */
}

/* استایل امتیاز شباهت */
.result-similarity {
    font-size: 0.85em;
    color: #007bff; /* رنگ آبی برای امتیاز */
    font-weight: bold;
    float: right; /* نمایش امتیاز در سمت راست */
    margin-right: 10px; /* فاصله از سمت راست */
    direction: ltr; /* برای نمایش عدد شباهت از چپ به راست */
}

/* استایل بخش توضیحی */
.explanation-text {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    text-align: justify;
    line-height: 1.6;
    font-size: 0.95em;
    color: #333;
}
.explanation-text p {
    margin-bottom: 10px;
}
.explanation-text p:last-child {
    margin-bottom: 0;
}
/* استایل برای متن بولد در بخش توضیحی */
.explanation-text strong {
    font-weight: bold; /* اطمینان از اعمال استایل بولد */
    color: #333; /* رنگ متن بولد را هم تنظیم کنید اگر می خواهید متفاوت باشد */
}


/* استایل فوتر */
.app-footer {
    margin-top: 40px;
    text-align: center;
    font-size: 0.9em;
    color: #555;
    padding-top: 20px; /* فاصله از محتوای بالا */
    border-top: 1px solid #eee; /* خط جداکننده بالای فوتر */
}

/* استایل دکمه کپی */
.copy-button {
    padding: 5px 10px;
    background-color: #007bff; /* رنگ آبی */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    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 {
    background-color: #0056b3; /* آبی تیره تر هنگام Hover */
}

.copy-button:active {
    background-color: #004085; /* آبی تیره تر هنگام کلیک */
}