/* =========================================
   فایل ۱: noticeboard.css
   طراحی استایل‌های راست‌چین، اینستاگرامی و حرفه‌ای
========================================= */

#schoolNoticeBoard {
    width: 100%;
    margin-bottom: 30px;
    display: none;
    animation: fadeIn 0.5s ease-out;
}

.notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 10px;
}

.notice-title {
    margin: 0;
    font-family: 'Lalezar', cursive;
    color: var(--primary, #2c3e50);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.notice-title::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #2ecc71;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 8px #2ecc71;
    animation: blinkGreen 1.5s infinite alternate;
}

@keyframes blinkGreen {
    0% { opacity: 0.3; transform: scale(0.9); box-shadow: 0 0 0 transparent; }
    100% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 10px #2ecc71; }
}

/* ✨ افکت کلاس نئونی (متن‌های خاص مدیر) */
.glow-text {
    animation: neonPulse 1.5s infinite alternate;
    font-weight: 900;
    color: #e74c3c;
}
@keyframes neonPulse {
    from { text-shadow: 0 0 5px #e74c3c, 0 0 10px #e74c3c; transform: scale(1); }
    to { text-shadow: 0 0 15px #ff7675, 0 0 25px #ff7675; transform: scale(1.05); }
}

/* ✨ افکت چشمک‌زن مینیمال برای داخل متن اطلاعیه‌ها (جدید) */
.minimal-blink {
    animation: smoothPulse 2s infinite;
    font-weight: bold;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-block;
}

@keyframes smoothPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.97); background: rgba(231, 76, 60, 0.2); }
}

.notice-feed {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 5px 0;
}

.notice-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    align-items: center;
    border: 1px solid #f0f2f5;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    min-height: 110px;
    flex-shrink: 0;
}

/* ✨ استایل پین شده */
.notice-card.pinned-post {
    border: 2px solid #f1c40f;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.2);
}
.pin-badge {
    color: #e67e22;
    font-size: 0.8rem;
    font-weight: bold;
    background: rgba(241, 196, 15, 0.15);
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 5px;
    vertical-align: middle;
}

.notice-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.notice-cover {
    width: 90px;
    height: 90px;
    background-color: #f1f2f6;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    margin: 10px;
    flex-shrink: 0;
}

.notice-body {
    padding: 10px 15px 10px 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    text-align: right;
}

.notice-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5px;
}

.notice-card-title {
    color: var(--primary, #2c3e50);
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.notice-date-badge {
    font-size: 0.7rem;
    color: #a4b0be;
    background: #f8f9fa;
    padding: 2px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

.notice-excerpt {
    font-size: 0.8rem;
    color: #636e72;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
    max-height: 2.8em; 
}
.notice-excerpt p { margin: 0; padding: 0; display: inline; } 

.notice-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notice-stats {
    display: flex;
    gap: 12px;
    color: #b2bec3;
    font-size: 0.85rem;
    font-weight: bold;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-item.liked i { color: #ff4757; }

/* -------------------------------------
   اسکلت لودینگ اینستاگرامی
-------------------------------------- */
.notice-skeleton {
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    border: 1px solid #f0f2f5;
    margin-bottom: 15px;
}
.skeleton-cover {
    width: 90px; height: 90px; border-radius: 15px; margin: 10px; flex-shrink: 0;
}
.skeleton-body {
    padding: 10px 15px 10px 10px; flex: 1; display: flex; flex-direction: column;
}
.skeleton-line { border-radius: 4px; }
.skeleton-shimmer {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 100%; 
    animation: shimmer 1.5s infinite linear forwards;
}
@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

/* -------------------------------------
   مودال مطالعه کامل 
-------------------------------------- */
/* ✨ استایل جدید Bottom-Sheet (کاملا مشابه اپلیکیشن‌های موبایل) */
.notif-read-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.85);
    z-index: 30000;
    display: none;
    justify-content: center;
    align-items: center; /* ✨ تغییر به مرکز صفحه */
    backdrop-filter: blur(10px);
    padding: 15px; 
    box-sizing: border-box;
}

.notif-read-content {
    background: white;
    width: 100%;
    max-width: 550px; 
    height: auto; 
    max-height: 85vh;
    border-radius: 25px; 
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 10px 50px rgba(0,0,0,0.4);
    animation: slideUpModal 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    text-align: right; 
    margin: 0; 
}

@media (min-width: 600px) {
    .notif-read-modal { align-items: center; padding: 20px; }
    .notif-read-content { 
        height: auto; 
        max-height: 85vh; 
        border-radius: 30px; 
        padding-top: 0; 
        box-shadow: 0 10px 50px rgba(0,0,0,0.4); 
    }
}
@keyframes slideUpModal {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.n-close-btn {
    position: absolute;
    top: 15px; left: 15px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid #eee; width: 35px; height: 35px;
    border-radius: 50%; color: #e74c3c;
    font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.n-modal-cover {
    width: 100%; height: 220px;
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f8f9fa; /* تغییر به رنگ ملایم برای جلوگیری از فضای خالی سفید جیغ */
    display: none;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.n-modal-body-scroll {
    padding: 25px; overflow-y: auto; flex: 1;
    display: flex; flex-direction: column;
    scroll-behavior: smooth;
    direction: rtl; 
}

.n-modal-body-scroll::-webkit-scrollbar { width: 6px; }
.n-modal-body-scroll::-webkit-scrollbar-thumb { background: #dfe6e9; border-radius: 10px; }

.n-modal-title {
    color: var(--primary, #2c3e50); margin-top: 0; font-family: 'Lalezar', cursive; font-size: 1.6rem; line-height: 1.4; text-align: right;
}

.n-modal-meta {
    margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #f1f2f6; padding-bottom: 12px;
}

.modal-like-btn {
    background: #f1f2f6;
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 13px;
    transition: 0.2s;
    color: #636e72;
}
.modal-like-btn.liked { background: #ffeaa7; color: #d63031; }

.n-html-content {
    font-size: 14px; color: #262626; line-height: 1.6; margin-bottom: 20px; text-align: right;
}
.n-html-content img { max-width: 100%; border-radius: 12px; margin: 10px 0; }

/* -------------------------------------
   نظرات مشابه اینستاگرام (RTL Nested Threading)
-------------------------------------- */
.n-comments-section {
    padding-top: 15px; display: flex; flex-direction: column; flex: 1;
    border-top: 1px solid #f1f2f6;
}

.c-thread { margin-bottom: 20px; }

.c-comment { display: flex; gap: 12px; align-items: flex-start; justify-content: flex-start; }
.c-reply { margin-bottom: 12px; }
.c-reply:last-child { margin-bottom: 0; }

.c-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; flex-shrink: 0; }
.c-avatar-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; flex-shrink: 0; }

.c-content { flex: 1; display: flex; flex-direction: column; padding-top: 2px; align-items: flex-start; }

.c-header { display: flex; align-items: baseline; margin-bottom: 3px; flex-wrap: wrap; justify-content: flex-start; }

.c-author { font-size: 13px; font-weight: 700; color: #262626; display: flex; align-items: center; }

.c-time { font-size: 11px; font-weight: 400; color: #8E8E8E; margin-right: 8px; }

/* 👑 نشان ویژه مدیریت */
.c-admin-badge {
    display: inline-block; padding: 2px 8px; border-radius: 15px; font-size: 10px; font-weight: 700; margin-right: 6px;
    background: linear-gradient(135deg, #f1c40f, #e67e22); color: white;
    box-shadow: 0 2px 5px rgba(241, 196, 15, 0.4);
}

.c-text { font-size: 13px; font-weight: 400; line-height: 1.6; color: #262626; word-break: break-word; text-align: right; }

.c-mention { color: #0095F6; font-weight: 600; cursor: pointer; }

.c-actions { margin-top: 6px; display: flex; gap: 15px; align-items: center; }

.c-reply-btn { font-size: 11px; font-weight: 600; color: #8E8E8E; cursor: pointer; transition: color 0.2s; }
.c-reply-btn:hover { color: #262626; }

.c-delete-btn { font-size: 12px; cursor: pointer; opacity: 0.5; transition: 0.2s; }
.c-delete-btn:hover { opacity: 1; transform: scale(1.1); }

/* تورفتگی و خط راهنمای عمودی برای ریپلای‌ها (RTL) */
.c-replies-container {
    display: flex; flex-direction: column; margin-top: 12px; margin-right: 46px; position: relative;
}

.c-replies-container::before {
    content: ''; position: absolute; right: -28px; top: -15px; bottom: 15px; width: 1.5px; background: rgba(0,0,0,0.15);
}

/* -------------------------------------
   باکس ارسال نظر ثابت و چیپس‌های پاسخ مدیر
-------------------------------------- */
.n-quick-replies {
    padding: 10px 20px; background: #fff; display: flex; gap: 8px; overflow-x: auto; border-top: 1px solid #f1f2f6; scrollbar-width: none;
}
.n-quick-replies::-webkit-scrollbar { display: none; }

.n-qr-chip {
    background: #f8f9fa; border: 1px solid #dfe6e9; border-radius: 20px; padding: 6px 12px; font-size: 12px; font-weight: bold; color: #2c3e50; cursor: pointer; white-space: nowrap; transition: 0.2s;
}
.n-qr-chip:hover { background: #e8f4f8; border-color: #0984e3; color: #0984e3; }

.n-comment-input-group {
    background: white; border-top: 1px solid #eee; padding: 15px 20px; display: flex; gap: 10px; align-items: center; box-sizing: border-box; flex-shrink: 0; width: 100%;
    position: relative; z-index: 10; direction: rtl;
}

.n-comment-input-group input {
    flex: 1; padding: 12px 20px; border-radius: 30px; border: 1px solid #dfe6e9; background: #f8f9fa; outline: none; font-family: inherit; font-size: 13px; transition: 0.3s;
}
.n-comment-input-group input:focus { border-color: #a29bfe; background: #fff; }

.n-comment-btn {
    background: transparent; color: #0095F6; border: none; font-weight: 700; font-size: 14px; cursor: pointer; padding: 0 10px; transition: 0.2s; font-family: inherit;
}
.n-comment-btn:hover { color: #00376B; }