Polished animated contact-reveal box (shift/job/talent details)

Replaced the plain "interest recorded" alert with a styled .contact-reveal
card that fades/slides in and lists each channel as its own row (icon +
label + value + action button). Shift/job show facility phone + Bale;
talent shows all its ContactMethods in the same table style.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/JobsMedical.Web/Pages/Jobs/Details.cshtml

@@ -37,10 +37,26 @@
         <div>
             @if (Model.ShowContact)
             {
-                <div class="alert alert-success">
-                    ✓ تمایل شما ثبت شد. برای پیگیری استخدام با مرکز تماس بگیرید:
-                    <strong>@(f.Phone ?? "شماره ثبت نشده")</strong>
-                    @if (!string.IsNullOrEmpty(f.BaleId)) { <text> — بله: @f.BaleId</text> }
+                <div class="contact-reveal" style="margin-bottom:16px;">
+                    <h4>✓ راه‌های ارتباطی مرکز</h4>
+                    @if (!string.IsNullOrEmpty(f.Phone))
+                    {
+                        <div class="contact-row">
+                            <span class="c-meta"><span class="c-type">📞 تلفن</span><span class="c-val" dir="ltr">@f.Phone</span></span>
+                            <a class="btn btn-accent" href="tel:@f.Phone">تماس</a>
+                        </div>
+                    }
+                    @if (!string.IsNullOrEmpty(f.BaleId))
+                    {
+                        <div class="contact-row">
+                            <span class="c-meta"><span class="c-type">💬 بله</span><span class="c-val" dir="ltr">@f.BaleId</span></span>
+                            <a class="btn btn-outline" href="https://ble.ir/@f.BaleId" target="_blank" rel="noopener">باز کردن</a>
+                        </div>
+                    }
+                    @if (string.IsNullOrEmpty(f.Phone) && string.IsNullOrEmpty(f.BaleId))
+                    {
+                        <p class="muted" style="margin:0;">شماره‌ای برای این مرکز ثبت نشده است.</p>
+                    }
                 </div>
             }
             @if (Model.Saved)

src/JobsMedical.Web/Pages/Shifts/Details.cshtml

@@ -36,12 +36,25 @@
         <div>
             @if (Model.ShowContact)
             {
-                <div class="alert alert-success">
-                    ✓ تمایل شما ثبت شد. برای هماهنگی شیفت با مرکز درمانی تماس بگیرید:
-                    <strong>@(f.Phone ?? "شماره ثبت نشده")</strong>
+                <div class="contact-reveal" style="margin-bottom:16px;">
+                    <h4>✓ راه‌های ارتباطی مرکز</h4>
+                    @if (!string.IsNullOrEmpty(f.Phone))
+                    {
+                        <div class="contact-row">
+                            <span class="c-meta"><span class="c-type">📞 تلفن</span><span class="c-val" dir="ltr">@f.Phone</span></span>
+                            <a class="btn btn-accent" href="tel:@f.Phone">تماس</a>
+                        </div>
+                    }
                     @if (!string.IsNullOrEmpty(f.BaleId))
                     {
-                        <text> — بله: @f.BaleId</text>
+                        <div class="contact-row">
+                            <span class="c-meta"><span class="c-type">💬 بله</span><span class="c-val" dir="ltr">@f.BaleId</span></span>
+                            <a class="btn btn-outline" href="https://ble.ir/@f.BaleId" target="_blank" rel="noopener">باز کردن</a>
+                        </div>
+                    }
+                    @if (string.IsNullOrEmpty(f.Phone) && string.IsNullOrEmpty(f.BaleId))
+                    {
+                        <p class="muted" style="margin:0;">شماره‌ای برای این مرکز ثبت نشده است.</p>
                     }
                 </div>
             }

src/JobsMedical.Web/Pages/Talent/Details.cshtml

@@ -70,23 +70,22 @@
                 @{ var contacts = (t.Contacts ?? new List<JobsMedical.Web.Models.ContactMethod>()).OrderBy(c => c.SortOrder).ToList(); }
                 @if (contacts.Count > 0)
                 {
-                    foreach (var c in contacts)
-                    {
-                        var href = JobsMedical.Web.Services.ContactInfo.Href(c.Type, c.Value);
-                        var label = JobsMedical.Web.Services.ContactInfo.Label(c.Type);
-                        var icon = JobsMedical.Web.Services.ContactInfo.Icon(c.Type);
-                        var cls = c.Type is JobsMedical.Web.Models.ContactType.Mobile or JobsMedical.Web.Models.ContactType.Phone ? "btn-accent" : "btn-outline";
-                        if (href is not null)
+                    <div class="contact-reveal">
+                        @foreach (var c in contacts)
                         {
-                            <a href="@href" class="btn @cls btn-block" dir="ltr" style="margin-bottom:6px; justify-content:space-between;" target="_blank" rel="nofollow noopener">
-                                <span>@c.Value</span><span>@icon @label</span>
-                            </a>
+                            var href = JobsMedical.Web.Services.ContactInfo.Href(c.Type, c.Value);
+                            var label = JobsMedical.Web.Services.ContactInfo.Label(c.Type);
+                            var icon = JobsMedical.Web.Services.ContactInfo.Icon(c.Type);
+                            var cls = c.Type is JobsMedical.Web.Models.ContactType.Mobile or JobsMedical.Web.Models.ContactType.Phone ? "btn-accent" : "btn-outline";
+                            <div class="contact-row">
+                                <span class="c-meta"><span class="c-type">@icon @label</span><span class="c-val" dir="ltr">@c.Value</span></span>
+                                @if (href is not null)
+                                {
+                                    <a class="btn @cls" href="@href" target="_blank" rel="nofollow noopener">باز کردن</a>
+                                }
+                            </div>
                         }
-                        else
-                        {
-                            <div class="muted" style="margin-bottom:6px;">@icon @label: <span dir="ltr">@c.Value</span></div>
-                        }
-                    }
+                    </div>
                 }
                 else if (telHref is not null)
                 {

src/JobsMedical.Web/wwwroot/css/site.css

@@ -272,6 +272,22 @@ label { font-size: 13px; }
 .tag-chip { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
   background: var(--primary-soft); color: var(--primary-dark); }
 mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 3px; }
+
+/* Animated contact reveal box (shift/job/talent details) */
+.contact-reveal { border: 1px solid var(--primary); border-radius: 14px; padding: 14px;
+  background: var(--primary-soft); animation: revealIn .35s cubic-bezier(.2,.7,.3,1); }
+@keyframes revealIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
+.contact-reveal h4 { margin: 0 0 10px; font-size: 15px; }
+.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
+  padding: 9px 12px; margin-bottom: 8px; animation: revealIn .4s ease backwards; }
+.contact-row:nth-child(2) { animation-delay: .04s; } .contact-row:nth-child(3) { animation-delay: .08s; }
+.contact-row:nth-child(4) { animation-delay: .12s; } .contact-row:nth-child(5) { animation-delay: .16s; }
+.contact-row:last-child { margin-bottom: 0; }
+.contact-row .c-meta { display: flex; flex-direction: column; min-width: 0; }
+.contact-row .c-type { font-size: 12px; color: var(--muted); }
+.contact-row .c-val { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
+.contact-row .btn { flex: 0 0 auto; padding: 6px 14px; }
 .badge-gender { background: #f3eefb; color: #6b3fa0; }
 
 /* ---------- Filters layout ---------- */