/* ============================================================
   پیام ناشناس (DORE-13) — استایل‌های اختصاصی
   ------------------------------------------------------------
   پوشش:
   ۱) صفحه عمومی message.php (کارت، فرم، کپچا، پاپ‌آپ تشکر)
   ۲) پنل ویرایشگر user/anonymous_messages.php (کارت‌های فقط‌خواندنی)
   ۳) پنل ادمین admin/anonymous_messages.php + anonymous_message_view.php
   ۴) ریسپانسیو موبایل‌فرست + سازگار با تم تاریک

   🆕 DORE-13:
   - بوردرهای تیره‌تر (متغیر --am-border) برای تشخیص راحت در موبایل
   - سن/وزن/قد همیشه در یک سطر — مینیمال و جمع‌وجور
   - متن راهنما و حریم خصوصی با فونت ۱۳
   - کپچای تک‌سطری جمع‌وجور
   - کارت پیام: هدر (آیکون + عنوان | تاریخ | ساعت) + بدنه بولد داخل باکس + فوتر وسط‌چین فیلدها
   ============================================================ */

/* ============================================================
   متغیرهای محلی رنگ بوردر — روشن / تاریک
   ============================================================ */
:root {
    --am-border: #94a3b8;        /* بوردر ورودی‌ها — تیره‌تر از --border پیش‌فرض */
    --am-border-strong: #64748b; /* بوردر کف‌تر کارت‌ها */
    --am-border-soft: #cbd5e1;   /* خطوط داخلی کارت */
}

[data-theme="dark"] {
    --am-border: #526078;
    --am-border-strong: #7b8aa3;
    --am-border-soft: #3f4d63;
}

/* ============================================================
   بخش ۱: صفحه عمومی
   ============================================================ */

.am-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 0 48px;
}

/* ---------- کارت اصلی ---------- */
.am-card {
    position: relative;
    background: var(--bg-card);
    border: 1.5px solid var(--am-border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 40px 36px 32px;
    overflow: hidden;
    transition: var(--transition);
}

.am-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, #ec4899, #7c3aed, #3b82f6);
    opacity: .9;
}

/* ---------- آواتار دایره‌ای ---------- */
.am-avatar-wrap {
    position: relative;
    width: 148px;
    height: 148px;
    margin: 8px auto 20px;
}

.am-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(124, 58, 237, .25);
    animation: am-float 5s ease-in-out infinite;
}

.am-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: var(--gradient);
    color: #fff;
}

.am-avatar-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px dashed rgba(124, 58, 237, .35);
    animation: am-spin 24s linear infinite;
    z-index: 1;
}

@keyframes am-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes am-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .am-avatar, .am-avatar-ring { animation: none; }
}

/* ---------- متن‌های بالای صفحه ---------- */
.am-greeting {
    text-align: center;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    font-weight: 900;
    background: linear-gradient(135deg, #ec4899, #7c3aed, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
    line-height: 1.4;
}

.am-intro {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 2.1;
    max-width: 480px;
    margin: 0 auto 26px;
}

/* ---------- فرم ---------- */
.am-form { margin-top: 4px; }

.am-field { margin-bottom: 14px; }

.am-label {
    display: block;
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: 7px;
    color: var(--text);
}

.am-opt-hint {
    font-weight: 400;
    font-size: .74rem;
    color: var(--text-muted);
}

.am-textarea,
.am-input {
    width: 100%;
    background: var(--bg);
    border: 1.5px solid var(--am-border);
    border-radius: 14px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
    line-height: 1.9;
    transition: var(--transition);
    outline: none;
}

/* 🆕 باکس پیام: بدون اسکرول — با افزایش متن خودکار رشد می‌کند */
.am-textarea {
    min-height: 112px;
    height: auto;
    resize: none;
    overflow: hidden;
}

.am-textarea:focus,
.am-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .12);
    background: var(--bg-card);
}

.am-textarea::placeholder,
.am-input::placeholder { color: var(--text-muted); opacity: .65; }

.am-counter {
    text-align: left;
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: 5px;
}

/* ---------- فیلدهای اختیاری: سن | وزن | قد — همیشه یک سطر ----------
   🆕 DORE-13: در دسکتاپ و موبایل هر سه فیلد در یک سطر مینیمال قرار می‌گیرند */
.am-optional-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
    align-items: start;
}

.am-optional-fields .am-field { margin-bottom: 0; }

.am-optional-fields .am-label {
    font-size: .84rem;
    margin-bottom: 5px;
}

.am-optional-fields .am-input {
    padding: 9px 10px;
    font-size: .95rem;
    text-align: center;
    border-radius: 12px;
}

/* متن راهنما — فونت ۱۳ (زیر فیلدهای اختیاری)
   🆕 DORE-15: بدون کادر و بدون پس‌زمینه — متن ساده و تمیز */
.am-helper {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 2;
    text-align: center;
    margin: 2px 0 14px;
}

/* ---------- کپچا — جمع‌وجور و مینیمال (تک‌سطری) ---------- */
.am-captcha-wrap { margin-bottom: 16px; }

.am-captcha-wrap .captcha-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    grid-template-areas:
        "label label"
        "q     input";
    gap: 8px 10px;
    align-items: stretch;
    margin: 0;
    padding: 12px 14px;
    background: var(--bg);
    border: 1.5px dashed var(--am-border);
    border-radius: 14px;
}

.am-captcha-wrap .captcha-label {
    grid-area: label;
    width: auto;
    margin-bottom: 0;
    font-size: .84rem;
    font-weight: 700;
}

.am-captcha-wrap .captcha-question {
    grid-area: q;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(124, 58, 237, .2);
}

.am-captcha-wrap .captcha-text {
    font-size: 1.12rem;
    letter-spacing: .5px;
    white-space: nowrap;
}

.am-captcha-wrap .captcha-input {
    grid-area: input;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    font-size: 1rem;
    border: 1.5px solid var(--am-border);
    border-radius: 12px;
    background: var(--bg-card);
}

/* ---------- خطا ---------- */
.am-error {
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .3);
    color: #dc2626;
    border-radius: 12px;
    padding: 11px 15px;
    font-size: .88rem;
    margin-bottom: 14px;
    line-height: 1.9;
}

/* ---------- دکمه‌ها ---------- */
.am-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.am-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 14px;
    padding: 13px 24px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.6;
}

.am-btn-send {
    flex: 2 1 170px;
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 6px 20px rgba(124, 58, 237, .35);
}

.am-btn-send:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(124, 58, 237, .45); }
.am-btn-send:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.am-btn-reset {
    flex: 1 1 110px;
    background: var(--bg);
    color: var(--text-muted);
    border: 1.5px solid var(--am-border);
}

.am-btn-reset:hover { border-color: var(--primary); color: var(--primary); }

/* حریم خصوصی — فونت ۱۳ (زیر دکمه‌ها) */
.am-privacy {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 2;
    margin-top: 16px;
}

/* ---------- هانی‌پات ---------- */
.am-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------- حالت غیرفعال ---------- */
.am-disabled-box { text-align: center; padding: 56px 32px; }

.am-disabled-icon { font-size: 3.4rem; margin-bottom: 14px; }

/* ============================================================
   پاپ‌آپ تشکر
   ============================================================ */

/* 🛠 DORE-15 — رفع باگ کلیک‌ناپذیری فرم:
   .am-modal-overlay دارای display:flex است و ویژگی hidden اچ‌تی‌ام‌ال را لغو می‌کرد؛
   نتیجه: یک لایهٔ تمام‌صفحهٔ نامرئی (opacity:0) با z-index:9999 روی کل صفحه قرار
   می‌گرفت و هیچ کلیکی به فرم/صفحه نمی‌رسید. با این قانون وقتی hidden است،
   کاملاً از جریان نمایش حذف می‌شود. */
.am-modal-overlay[hidden] {
    display: none !important;
    pointer-events: none !important;
}

.am-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .22s ease;
}

.am-modal-overlay.am-show { opacity: 1; }

.am-modal {
    background: var(--bg-card);
    border-radius: 26px;
    border: 1.5px solid var(--am-border);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
    max-width: 420px;
    width: 100%;
    padding: 40px 30px 30px;
    text-align: center;
    transform: scale(.85) translateY(16px);
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}

.am-modal-overlay.am-show .am-modal { transform: scale(1) translateY(0); }

.am-modal-emoji { font-size: 3.6rem; margin-bottom: 10px; animation: am-bounce .9s ease infinite alternate; }

@keyframes am-bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-8px); }
}

.am-modal h2 {
    font-size: 1.45rem;
    font-weight: 900;
    margin-bottom: 10px;
    color: var(--text);
}

.am-modal-text {
    color: var(--text-muted);
    line-height: 2.1;
    margin-bottom: 22px;
}

.am-modal-btn { width: 100%; }

/* ============================================================
   بخش ۲: کارت‌های پیام — پنل ویرایشگر (و ادمین)
   🆕 DORE-13: ساختار جدید کارت
   ┌──────────────────────────────────────────┐
   │ [💌] پیام ناشناس        | 📅 تاریخ | 🕐 ساعت │
   │ ──────────────────────────────────────────── │
   │ ┌────────────────────────────────────────┐ │
   │ │  متن پیام (بولد — مناسب اسکرین‌شات)     │ │
   │ └────────────────────────────────────────┘ │
   │ ──────────────────────────────────────────── │
   │   سن: ۱۸ سال  |  وزن: ۶۸ کیلوگرم  |  قد: …   │
   └──────────────────────────────────────────┘
   ============================================================ */

.am-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 16px;
    margin: 20px 0;
}

.am-card-panel,
.am-cards .am-card {
    position: relative;
    background: var(--bg-card);
    /* 🆕 بوردر کلفن‌تر و تیره‌تر — مشخص و هماهنگ با دارک‌مود */
    border: 2px solid var(--am-border-strong);
    border-radius: 18px;
    padding: 16px 16px 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.am-cards .am-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary);
}

/* پیام خوانده‌نشده — هایلایت حاشیه */
.am-cards .am-card.am-card-new { border-color: #10b981; }

/* ============================================================
   🆕 DORE-18: چیدمان کاشی (ماسونری) کارت‌ها — فقط دسکتاپ
   ------------------------------------------------------------
   پیام‌ها طول‌های مختلفی دارند؛ در grid معمولی هر ردیف به اندازهٔ
   بلندترین کارت باز می‌شود و فضای خالی عجیب ساخته می‌شود.
   راه‌حل کاشی: grid-auto-rows کوچک + span محاسبه‌شدهٔ هر کارت با
   جاوااسکریپت + grid-auto-flow: row dense → کارت‌های بعدی جای خالیِ
   کارت‌های کوتاه‌تر را خودکار پر می‌کنند (شبیه Pinterest).
   کلاس am-masonry توسط جاوااسکریپت اضافه می‌شود؛ اگر جاوااسکریپت
   غیرفعال باشد چیدمان معمولی grid باقی می‌ماند (fallback امن).
   در موبایل (≤768px) کارت‌ها پشت‌سرهم‌اند و همین چیدمان درست است.
   ============================================================ */
@media (min-width: 769px) {

    .am-cards.am-masonry {
        grid-auto-rows: 8px;
        grid-auto-flow: row dense;
    }

    .am-cards.am-masonry .am-card {
        /* span هر کارت توسط JS بر اساس ارتفاع واقعی‌اش محاسبه می‌شود */
        grid-row-end: span var(--am-span, 12);
        /* ارتفاع طبیعی کارت حفظ شود — کشیده‌شدن به اندازهٔ span لازم نیست */
        align-self: start;
    }
}

/* ---------- هدر کارت ---------- */
.am-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--am-border-soft);
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.am-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: .9rem;
    color: var(--text);
    white-space: nowrap;
}

.am-card-title-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex: 0 0 auto;
}

/* نشان پیام جدید (داخل هدر — جای نقطه شناور قبلی) */
.am-card-new-badge {
    background: #10b981;
    color: #fff;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: .68rem;
    font-weight: 800;
    animation: am-pulse 1.6s ease infinite;
}

/* جداکننده | */
.am-head-sep,
.am-fields-sep {
    color: var(--am-border-strong);
    opacity: .55;
    font-weight: 400;
    user-select: none;
}

/* تاریخ و ساعت — دقیقا سمت چپ (انتهای سطر در RTL) */
.am-card-head .am-head-sep:first-of-type { margin-inline-start: auto; }

.am-card-date,
.am-card-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    direction: rtl;
}

/* ---------- بدنه پیام — باکس محتوا ---------- */
.am-card-body {
    background: var(--bg);
    border: 1px solid var(--am-border-soft);
    border-radius: 14px;
    padding: 14px 16px 18px;
    margin: 12px 0;
}

.am-card-text {
    font-size: 1rem;
    /* 🆕 متن بولد — برای اسکرین‌شات و اشتراک‌گذاری واضح */
    font-weight: 700;
    line-height: 2.05;
    color: var(--text);
    /* 🆕 DORE-19: pre-wrap حذف شد — nl2br خودش <br> می‌گذارد و pre-wrap باعث
       «شکست دوبرابر» (خط خالی بین هر جمله) می‌شد؛ حالا هر جمله دقیقا یک سطر */
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0;
}

/* ---------- فوتر کارت: سن | وزن | قد — وسط‌چین ----------
   🆕 DORE-16: سایز فونت سیال (clamp) — خط «سن | وزن | قد» همیشه دقیقاً در
   یک سطر جا می‌شود؛ نه به سطر بعد می‌رود و نه از صفحه بیرون می‌زند */
.am-card-fields {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    border-top: 1px solid var(--am-border-soft);
    padding-top: 11px;
    font-size: clamp(.62rem, 2.2vw, .78rem);
    font-weight: 700;
    color: var(--text);
    direction: rtl;
}

.am-field-pair { white-space: nowrap; }

.am-field-pair .am-field-label { color: #6d28d9; }
[data-theme="dark"] .am-field-pair .am-field-label { color: #a78bfa; }

.am-field-pair .am-field-value { color: var(--text); }

/* یادداشت ادمین (فقط لیست ادمین) */
.am-card-note {
    font-size: .78rem;
    color: var(--text-muted);
    background: rgba(245, 158, 11, .07);
    border: 1px dashed rgba(245, 158, 11, .3);
    border-radius: 9px;
    padding: 7px 11px;
    margin-top: 10px;
}

/* اکشن‌ها (فقط لیست ادمین) */
.am-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid var(--am-border-soft);
    padding-top: 12px;
    margin-top: 12px;
}

.am-inline-form { display: inline; }

/* ============================================================
   🆕 DORE-15: چیدمان یک‌سطری پیام‌ها — فقط پنل ادمین
   ┌──┬──────────────────────┬─────┬─────┬─────┬──────────┬───────┬──────────────┐
   │ #│ متن پیام             │ سن  │ وزن │ قد  │ تاریخ    │ ساعت  │ عملیات       │
   └──┴──────────────────────┴─────┴─────┴─────┴──────────┴───────┴──────────────┘

   🆕 DORE-16 — رفع بیرون‌زدگی سطرها:
   - ستون «عملیات» به‌جای عرض ثابت ۲۰۸px حالا auto است (هم‌عرض محتوای دکمه‌ها) ←
     دیگر هیچ دکمه‌ای (مخصوصاً «حذف») بریده نمی‌شود.
   - ستون‌های تاریخ/ساعت/فیلدها جمع‌وجورتر شدند و متن پیام min-width:0 گرفت
     تا ستون متن آزادانه جمع شود.
   - نقطهٔ شکست به دوخطی: ۹۰۰px → ۱۲۰۰px  (سایدبار ادمین ۲۶۰px است؛
     زیر ۱۲۰۰px جا برای چیدمان یک‌سطری کامل نیست)
   ============================================================ */

.am-rows {
    background: var(--bg-card);
    border: 1.5px solid var(--am-border);
    border-radius: 16px;
    overflow: hidden;
    margin: 20px 0;
    box-shadow: var(--shadow);
}

/* سرستون */
.am-row-head,
.am-row {
    display: grid;
    grid-template-columns: 26px 40px minmax(140px, 1fr) 54px 62px 54px 96px 58px auto;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
}

.am-row-head {
    background: var(--bg);
    border-bottom: 2px solid var(--am-border-strong);
    font-size: .78rem;
    font-weight: 800;
    color: var(--text-muted);
}

.am-row {
    border-bottom: 1px solid var(--am-border-soft);
    transition: background .15s ease;
}

.am-row:last-child { border-bottom: none; }
.am-row:hover { background: rgba(124, 58, 237, .045); }
.am-row.am-row-new { background: rgba(16, 185, 129, .06); }
.am-row.am-row-new:hover { background: rgba(16, 185, 129, .1); }

/* شماره ردیف */
.am-row-num {
    font-weight: 800;
    font-size: .82rem;
    color: var(--text-muted);
    text-align: center;
    background: var(--bg);
    border: 1px solid var(--am-border-soft);
    border-radius: 8px;
    padding: 3px 0;
}

/* متن پیام — یک خط با سه‌نقطه
   🆕 DORE-16: min-width:0 — در گرید بدون این، ستون متن قابل جمع‌شدن نیست */
.am-row-text {
    min-width: 0;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: right;
}

.am-row-text .am-row-new-chip {
    background: #10b981;
    color: #fff;
    border-radius: 999px;
    padding: 0 8px;
    font-size: .64rem;
    font-weight: 800;
    margin-inline-start: 6px;
    white-space: nowrap;
}

/* فیلدهای سن / وزن / قد — مقدار خالص (بدون واحد) */
.am-row-field {
    font-size: .84rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    white-space: nowrap;
}
.am-row-field.am-empty-val { color: var(--text-muted); opacity: .5; font-weight: 400; }

/* تاریخ و ساعت */
.am-row-date,
.am-row-time {
    font-size: .78rem;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: center;
}

/* عملیات
   🆕 DORE-16: دکمه‌های کمی فشرده‌تر تا هر سه دکمه (مشاهده/ویرایش/حذف) کامل جا شوند */
.am-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.am-row-actions .msg-action-btn {
    padding: 6px 10px;
    font-size: .75rem;
    border-radius: 9px;
    white-space: nowrap;
}

/* — زیر ۱۲۰۰px: هر پیام دو خطی جمع‌وجور — (DORE-16: قبلاً ۹۰۰px بود) */
@media (max-width: 1200px) {
    .am-row-head { display: none; }

    .am-row {
        grid-template-columns: 24px 34px minmax(0, 1fr) auto;
        grid-template-areas:
            "chk  num  text text"
            "meta meta meta meta"
            "act  act  act  act";
        gap: 6px 8px;
        padding: 10px 12px;
    }

    .am-row-check     { grid-area: chk; align-self: start; }
    .am-row-num       { grid-area: num; align-self: start; }
    .am-row-text      { grid-area: text; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .86rem; line-height: 1.9; }
    .am-row-actions   { grid-area: act; justify-content: flex-end; }
    .am-row-actions .msg-action-btn { padding: 5px 10px; font-size: .72rem; }

    /* فیلدها + تاریخ + ساعت در خط دوم */
    .am-row-meta {
        grid-area: meta;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        font-size: .74rem;
        color: var(--text-muted);
        margin-top: 2px;
    }
    .am-row-meta .am-row-field { font-size: .78rem; }
    .am-row-meta .am-row-date,
    .am-row-meta .am-row-time { text-align: right; }
}

/* 🆕 DORE-16 — موبایل خیلی باریک: دکمه‌های عملیات در یک ردیف کامل و هم‌عرض
   (سه دکمه، مثل اپ‌های معروف؛ دیگر هیچ دکمه‌ای از عرض صفحه بیرون نمی‌زند) */
@media (max-width: 420px) {
    .am-row {
        grid-template-areas:
            "chk  num  text text"
            "meta meta meta meta"
            "act  act  act  act";
        gap: 7px 6px;
    }
    .am-row-actions { justify-content: stretch; gap: 5px; }
    .am-row-actions .msg-action-btn,
    .am-row-actions .am-inline-form { flex: 1 1 auto; }
    .am-row-actions .am-inline-form .msg-action-btn { width: 100%; justify-content: center; }
}

/* دسکتاپ: متا مخفی (ستون‌های جدا دارند) */
.am-row-meta { display: none; }
@media (max-width: 1200px) {
    .am-row-meta { display: flex; }
    .am-row .am-row-field,
    .am-row .am-row-date,
    .am-row .am-row-time { display: none; }
    .am-row-meta .am-row-field,
    .am-row-meta .am-row-date,
    .am-row-meta .am-row-time { display: inline-flex; }
}

/* ============================================================
   حالت خالی + صفحه‌بندی + یادداشت پایین (پنل ویرایشگر)
   ============================================================ */

.am-empty {
    background: var(--bg-card);
    border: 2px dashed var(--am-border);
    border-radius: 22px;
    text-align: center;
    padding: 56px 24px;
    margin: 20px 0;
}

.am-empty-icon { font-size: 3.4rem; margin-bottom: 12px; }

.am-empty h2 { font-size: 1.25rem; margin-bottom: 8px; color: var(--text); }

.am-empty p { color: var(--text-muted); margin-bottom: 18px; }

.am-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 26px 0 10px;
    flex-wrap: wrap;
}

.am-page-btn {
    background: var(--bg-card);
    border: 1.5px solid var(--am-border);
    border-radius: 12px;
    padding: 9px 18px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    transition: var(--transition);
}

.am-page-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.am-page-info {
    font-size: .85rem;
    color: var(--text-muted);
}

.am-footer-note {
    text-align: center;
    font-size: .78rem;
    color: var(--text-muted);
    background: rgba(59, 130, 246, .06);
    border: 1px dashed rgba(59, 130, 246, .25);
    border-radius: 12px;
    padding: 10px 16px;
    margin: 10px 0 30px;
    line-height: 1.9;
}

/* ============================================================
   ریسپانسیو موبایل‌فرست
   ============================================================ */

@media (max-width: 768px) {

    .am-page { padding: 14px 0 36px; }

    .am-card {
        padding: 30px 18px 22px;
        border-radius: 20px;
    }

    .am-avatar-wrap { width: 124px; height: 124px; margin-bottom: 16px; }
    .am-avatar { width: 116px; height: 116px; }
    .am-avatar-fallback { font-size: 3.2rem; }

    .am-greeting { font-size: 1.5rem; }

    .am-intro { font-size: .95rem; margin-bottom: 20px; }

    /* فیلدها همچنان یک سطر سه‌ستونه — مینیمال */
    .am-optional-fields { gap: 8px; }
    .am-optional-fields .am-input { padding: 9px 6px; font-size: .92rem; }
    .am-optional-fields .am-label { font-size: .8rem; }

    /* کپچا — کوچک‌تر و جمع‌وجورتر در موبایل */
    .am-captcha-wrap .captcha-wrap { grid-template-columns: minmax(0, 1fr) 108px; padding: 10px 11px; gap: 7px 8px; }
    .am-captcha-wrap .captcha-label { font-size: .78rem; }
    .am-captcha-wrap .captcha-question { padding: 8px 10px; }
    .am-captcha-wrap .captcha-text { font-size: 1rem; }
    .am-captcha-wrap .captcha-input { padding: 9px 10px; font-size: .95rem; }

    .am-actions {
        flex-direction: row;      /* دکمه‌های ارسال و بازنشانی یک سطر */
        gap: 8px;
    }

    .am-btn { padding: 12px 16px; font-size: .95rem; }

    .am-privacy { font-size: 13px; margin-top: 14px; }

    /* کارت پیام — موبایل */
    .am-cards { grid-template-columns: 1fr; gap: 12px; }

    .am-card-panel,
    .am-cards .am-card { padding: 13px 12px 12px; border-radius: 16px; }

    .am-card-head { font-size: .75rem; gap: 5px 8px; padding-bottom: 10px; }

    .am-card-title { font-size: .85rem; gap: 6px; }
    .am-card-title-icon { width: 27px; height: 27px; border-radius: 9px; font-size: .88rem; }

    .am-card-date, .am-card-time { gap: 4px; }

    .am-card-body { padding: 12px 13px 15px; margin: 10px 0; border-radius: 12px; }

    .am-card-text { font-size: .95rem; line-height: 2; }

    /* 🆕 DORE-16: فیلدهای کارت در موبایل — فونت از clamp پیروی می‌کند؛ فقط فاصله‌ها جمع‌وجورتر */
    .am-card-fields { padding-top: 9px; gap: 3px 6px; }
}

/* موبایل خیلی باریک — جداکننده‌ها فشرده‌تر */
@media (max-width: 380px) {
    .am-card-head { gap: 4px 6px; }
    .am-optional-fields .am-opt-hint { display: none; }
}

/* تبلت — همان چیدمان سه‌ستونه حفظ می‌شود */

/* سازگاری چاپ */
@media print {
    .am-modal-overlay, .am-actions, .am-privacy { display: none !important; }
    .am-card { box-shadow: none; border: 1px solid #ccc; }
}

/* ============================================================
   🆕 DORE-20 — عملیات گروهی + فیلتر «فقط امروز»
   ============================================================ */

/* ---------- چک‌باکس انتخاب هر پیام ---------- */
.am-row-check {
    display: flex;
    align-items: center;
    justify-content: center;
}
.am-row-head .am-row-check { justify-content: center; }
.am-row-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #7c3aed;
    cursor: pointer;
    margin: 0;
}
/* هایلایت سطر انتخاب‌شده (مرورگرهای جدید) */
.am-row:has(.am-check:checked) { background: rgba(124, 58, 237, .08); }
.am-row.am-row-new:has(.am-check:checked) { background: rgba(124, 58, 237, .12); }

/* ---------- نوار عملیات گروهی (پنل ادمین) ---------- */
.am-bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    background: var(--bg-card);
    border: 1.5px dashed var(--am-border);
    border-radius: 14px;
    padding: 10px 12px;
    margin: 14px 0;
}
.am-bulk-form { display: inline-flex; margin: 0; }
.am-bulk-btn {
    white-space: nowrap;
    font-size: .78rem;
    padding: 7px 14px;
}
.am-bulk-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.4);
}
.am-bulk-btn-all {
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
    color: #fff;
    border: none;
    font-weight: 700;
}
.am-bulk-btn-all:hover { filter: brightness(1.06); }
.am-bulk-count {
    margin-inline-start: auto;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--am-border-soft);
    border-radius: 999px;
    padding: 5px 12px;
}
@media (max-width: 640px) {
    .am-bulk-bar { gap: 6px; padding: 9px 10px; }
    .am-bulk-form,
    .am-bulk-btn { width: 100%; justify-content: center; }
    .am-bulk-count { margin-inline-start: 0; text-align: center; width: 100%; }
}

/* ---------- کلیدهای «همه / فقط امروز» (پنل ویرایشگر) ---------- */
.am-range-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 6px;
}
.am-range-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-card);
    border: 1.5px solid var(--am-border);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    transition: border-color .18s, background .18s, color .18s;
}
.am-range-pill b {
    font-size: .78rem;
    background: var(--bg);
    border: 1px solid var(--am-border-soft);
    border-radius: 999px;
    padding: 1px 9px;
    color: var(--text-muted);
}
.am-range-pill:hover { border-color: rgba(124, 58, 237, .55); }
.am-range-pill.active {
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
    border-color: transparent;
    color: #fff;
}
.am-range-pill.active b {
    background: rgba(255, 255, 255, .2);
    border-color: transparent;
    color: #fff;
}