/**
 * Al-Shams Discover — Mobile-first, smooth, beautiful
 *
 * المعمارية: كل الـ classes prefixed بـ xdsc- لمنع التعارض
 * الـ overlay دايماً dark theme بغض النظر عن thema الموقع
 * Animations: cubic-bezier(.4, 0, .2, 1) — material-style ease-out
 */

/* ============================================================
   1. الزرار العائم (FAB) — Saudi Burgundy Identity Theme
   نخلة وجمل — هوية سعودية أصيلة
   ============================================================ */
.xdsc-fab-wrap{
    position:fixed;
    bottom:75px;
    left:18px;
    z-index:998;
    pointer-events:none;
    /* الـ FAB هو الـ anchor — الـ bubble تطلع فوقه */
}
.xdsc-fab-wrap > .xdsc-fab{
    pointer-events:auto;
}

.xdsc-fab{
    position:relative;
    width:58px;
    height:58px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    padding:0;
    line-height:1;
    overflow:visible;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    -webkit-tap-highlight-color:transparent;
    will-change:transform;

    /* Multi-layer gradient: عنابي سعودي فخم */
    background:
        radial-gradient(circle at 32% 25%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 38%),
        linear-gradient(135deg, #C0334D 0%, #8B1A2B 35%, #6B1422 70%, #4A0E18 100%);

    /* Layered shadow: burgundy halo + outer ring + inner highlight */
    box-shadow:
        0 8px 24px rgba(139, 26, 43, .55),
        0 2px 6px rgba(0, 0, 0, .30),
        0 0 28px rgba(192, 51, 77, .30),
        inset 0 -3px 8px rgba(74, 14, 24, .40),
        inset 0 2px 4px rgba(255, 255, 255, .50);

    color:#fff;
    /* breathing glow بطيء */
    animation:xdsc-fab-glow 3s ease-in-out infinite;
}
@keyframes xdsc-fab-glow{
    0%, 100%{ transform: scale(1); opacity: 1; }
    50%{ transform: scale(1.03); opacity: .9; }
}

.xdsc-fab:hover{
    transform:translateY(-3px) scale(1.06);
}
.xdsc-fab:active{transform:scale(.94)}

/* الأيقونة (🇸🇦 علم السعودية) */
.xdsc-fab-icon{
    display:inline-block;
    line-height:1;
    position:relative;
    z-index:2;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
    animation:xdsc-icon-sway 4s ease-in-out infinite;
}
@keyframes xdsc-icon-sway{
    0%, 100%{transform:scale(1) rotate(0deg)}
    25%     {transform:scale(1.06) rotate(3deg)}
    50%     {transform:scale(1) rotate(0deg)}
    75%     {transform:scale(1.06) rotate(-3deg)}
}

/* ============================================================
   1b. Sparks — شرارات تخرج من الـ FAB
   ============================================================ */
.xdsc-fab-spark{
    position:absolute;
    top:50%;
    left:50%;
    width:6px;
    height:6px;
    border-radius:50%;
    background:radial-gradient(circle, #FFD700 0%, #C0334D 60%, transparent 100%);
    opacity:0;
    pointer-events:none;
    transform:translate(-50%, -50%);
    box-shadow:0 0 6px #C0334D;
    will-change:transform, opacity;
}
.xdsc-fab-spark:nth-child(2){animation:xdsc-spark-up    2.4s ease-out infinite}
.xdsc-fab-spark:nth-child(3){animation:xdsc-spark-right 2.4s ease-out .6s infinite}
.xdsc-fab-spark:nth-child(4){animation:xdsc-spark-down  2.4s ease-out 1.2s infinite}
.xdsc-fab-spark:nth-child(5){animation:xdsc-spark-left  2.4s ease-out 1.8s infinite}

@keyframes xdsc-spark-up{
    0%   {transform:translate(-50%, -50%) scale(0);opacity:0}
    10%  {opacity:1}
    100% {transform:translate(-50%, -260%) scale(.3);opacity:0}
}
@keyframes xdsc-spark-right{
    0%   {transform:translate(-50%, -50%) scale(0);opacity:0}
    10%  {opacity:1}
    100% {transform:translate(180%, -50%) scale(.3);opacity:0}
}
@keyframes xdsc-spark-down{
    0%   {transform:translate(-50%, -50%) scale(0);opacity:0}
    10%  {opacity:1}
    100% {transform:translate(-50%, 160%) scale(.3);opacity:0}
}
@keyframes xdsc-spark-left{
    0%   {transform:translate(-50%, -50%) scale(0);opacity:0}
    10%  {opacity:1}
    100% {transform:translate(-280%, -50%) scale(.3);opacity:0}
}

/* ============================================================
   1c. Pulse rings — أول 3 ثواني (welcome attention)
   ============================================================ */
.xdsc-fab.xdsc-fab-pulse::before,
.xdsc-fab.xdsc-fab-pulse::after{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:50%;
    border:2px solid #C0334D;
    opacity:.7;
    pointer-events:none;
    animation:xdsc-pulse-ring 1.6s ease-out 2;
}
.xdsc-fab.xdsc-fab-pulse::after{
    animation-delay:.6s;
}
@keyframes xdsc-pulse-ring{
    0%   {transform:scale(1);opacity:.7;border-width:2px}
    100% {transform:scale(1.9);opacity:0;border-width:1px}
}

/* ============================================================
   1d. Topic Bubbles — تطلع فوق الـ FAB (مش بجانبه)
   ============================================================ */
.xdsc-fab-bubbles{
    position:absolute;
    bottom:calc(100% + 10px);  /* فوق الـ FAB بـ 10px */
    left:0;                     /* تبدأ من الجهة الشمال للـ FAB */
    pointer-events:none;
    /* مفيش width ثابت — كل bubble بتاخد عرضها حسب محتواها */
    /* الـ children كلهم absolute → الـ container 0×0 لكن absolute = OK */
    direction:rtl;
}
.xdsc-bubble{
    position:absolute;
    bottom:0;
    left:0;                     /* اليسار الأقصى = شمال الـ FAB → مفيش قطع */
    transform-origin:29px bottom;  /* origin فوق الـ FAB center (تأثير pop-out) */
    transform:translateY(15px) scale(.55);
    background:linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,240,242,.96) 100%);
    color:#4A0E18;
    padding:8px 14px 8px 12px;
    border-radius:20px;
    font-size:12.5px;
    font-weight:800;
    white-space:nowrap;
    /* حماية من overflow على شاشة صغيرة */
    max-width:calc(100vw - 36px);
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:
        0 8px 20px rgba(139, 26, 43, .28),
        0 2px 6px rgba(0, 0, 0, .15),
        inset 0 1px 0 rgba(255, 255, 255, .7);
    border:1.5px solid rgba(192, 51, 77, .35);
    display:flex;
    align-items:center;
    gap:7px;
    opacity:0;
    will-change:transform, opacity;
    /* 24s cycle: 6 bubbles × 4s each */
    animation:xdsc-bubble-cycle 24s linear infinite;
}

/* Negative animation-delay = start mid-cycle. Each bubble visible in its slot. */
.xdsc-bubble:nth-child(1){animation-delay:    0s}
.xdsc-bubble:nth-child(2){animation-delay:  -20s}
.xdsc-bubble:nth-child(3){animation-delay:  -16s}
.xdsc-bubble:nth-child(4){animation-delay:  -12s}
.xdsc-bubble:nth-child(5){animation-delay:   -8s}
.xdsc-bubble:nth-child(6){animation-delay:   -4s}

@keyframes xdsc-bubble-cycle{
    /* pop up من الـ FAB → hold → fade up */
    0%      {opacity:0;transform:translateY(15px) scale(.55)}
    1.5%    {opacity:0;transform:translateY(15px) scale(.55)}
    4%      {opacity:1;transform:translateY(-3px) scale(1.05)}
    5.5%    {opacity:1;transform:translateY(0) scale(1)}
    13.5%   {opacity:1;transform:translateY(0) scale(1)}
    16.67%  {opacity:0;transform:translateY(-10px) scale(.88)}
    100%    {opacity:0;transform:translateY(-10px) scale(.88)}
}

.xdsc-bubble-emoji{
    display:inline-block;
    font-size:18px;
    line-height:1;
    /* كل bubble بـ animation خاص للـ emoji حسب نوع المحتوى */
    will-change:transform;
}

/* تأثيرات خاصة لكل bubble — سعودية */
.xdsc-bubble:nth-child(1) .xdsc-bubble-emoji{
    /* 🇸🇦 أخبار السعودية — gentle wave */
    animation:xdsc-emoji-flag 4s ease-in-out infinite;
}
.xdsc-bubble:nth-child(2) .xdsc-bubble-emoji{
    /* 💼 وظائف السعودية — pulse */
    animation:xdsc-emoji-jobs 4s ease-in-out infinite;
}
.xdsc-bubble:nth-child(3) .xdsc-bubble-emoji{
    /* 🏘️ المحليات — bounce */
    animation:xdsc-emoji-local 4s ease-in-out infinite;
}
.xdsc-bubble:nth-child(4) .xdsc-bubble-emoji{
    /* 🎭 منوعات — rotate */
    animation:xdsc-emoji-variety 4s ease-in-out infinite;
}
.xdsc-bubble:nth-child(5) .xdsc-bubble-emoji{
    /* ⚽ رياضة — spin */
    animation:xdsc-emoji-sports 4s ease-in-out infinite;
}
.xdsc-bubble:nth-child(6) .xdsc-bubble-emoji{
    /* 🌍 مدارات عالمية — globe rotation */
    animation:xdsc-emoji-globe 4s ease-in-out infinite;
}

@keyframes xdsc-emoji-flag{
    0%, 100%{transform:skewX(0) scale(1)}
    25%     {transform:skewX(-5deg) scale(1.05)}
    75%     {transform:skewX(5deg) scale(1.05)}
}
@keyframes xdsc-emoji-jobs{
    0%, 100%{transform:scale(1); opacity:.85}
    50%     {transform:scale(1.18); opacity:1}
}
@keyframes xdsc-emoji-local{
    0%, 100%{transform:translateY(0) scale(1)}
    25%     {transform:translateY(-3px) scale(1.08)}
    50%     {transform:translateY(0) scale(1)}
    75%     {transform:translateY(-2px) scale(1.05)}
}
@keyframes xdsc-emoji-variety{
    0%, 100%{transform:scale(1) rotate(0); opacity:.85}
    30%     {transform:scale(1.2) rotate(-5deg); opacity:1}
    60%     {transform:scale(1.1) rotate(3deg); opacity:1}
}
@keyframes xdsc-emoji-sports{
    0%, 100%{transform:scale(1) rotate(0deg)}
    25%     {transform:scale(1.08) rotate(8deg)}
    50%     {transform:scale(1) rotate(0deg)}
    75%     {transform:scale(1.08) rotate(-8deg)}
}
@keyframes xdsc-emoji-globe{
    0%, 100%{transform:rotate(0) scale(1)}
    50%     {transform:rotate(12deg) scale(1.12)}
}

.xdsc-bubble-text{
    display:inline-block;
    line-height:1;
}

/* tail/arrow: مثلث يشاور لتحت ناحية الـ FAB */
.xdsc-bubble::before{
    content:'';
    position:absolute;
    /* المثلث فوق الـ FAB بالظبط (29px = نص عرض الـ FAB = 58/2) */
    left:22px;
    bottom:-7px;
    width:0;
    height:0;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:8px solid rgba(255, 240, 242, .96);
    filter:drop-shadow(0 1px 0 rgba(192, 51, 77, .35));
}

/* ============================================================
   1e. Responsive — bubbles تظهر على كل المقاسات (بما فيها الموبايلات الصغيرة)
   ============================================================ */
@media(min-width:769px){
    .xdsc-fab-wrap{bottom:80px}
    .xdsc-fab{width:62px;height:62px;font-size:26px}
    .xdsc-bubble{font-size:14px;padding:10px 16px 10px 14px;transform-origin:31px bottom}
    .xdsc-bubble-emoji{font-size:20px}
    .xdsc-bubble::before{left:24px}
}

/* ============================================================
   1f. لما الـ overlay مفتوح — أوقف animations (perf)
   ============================================================ */
body.xdsc-active .xdsc-fab-wrap{
    visibility:hidden;
    /* visibility:hidden يوقف animations على معظم المتصفحات */
}

/* احترام prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){
    .xdsc-fab,
    .xdsc-fab-icon,
    .xdsc-fab-spark,
    .xdsc-bubble,
    .xdsc-bubble-emoji{
        animation:none!important;
    }
    /* في reduced-motion: نخفي الـ bubbles والـ sparks تماماً */
    .xdsc-fab-bubbles,
    .xdsc-fab-spark{
        display:none;
    }
}

/* ============================================================
   2. Overlay فل سكرين
   ============================================================ */
.xdsc-overlay{
    position:fixed;
    inset:0;
    background:#0a0a0a;
    z-index:9999;
    display:flex;
    flex-direction:column;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease,visibility .3s ease;
    color:#fff;
    font-family:inherit;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
    /* touch-action: none منقول للـ stage فقط عشان الأقسام تقدر تتسحب */
}
.xdsc-overlay.xdsc-open{
    opacity:1;
    visibility:visible;
}

/* خلفية متدرجة ناعمة */
.xdsc-overlay::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at top,rgba(18,82,168,.18) 0%,transparent 50%),
        radial-gradient(ellipse at bottom,rgba(220,30,30,.08) 0%,transparent 50%);
    pointer-events:none;
    z-index:0;
}

/* ============================================================
   3. الهيدر العلوي
   ============================================================ */
.xdsc-header{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    padding-top:max(14px,env(safe-area-inset-top));
    background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);
    pointer-events:auto;
    /* السماح بالسحب الأفقي للأقسام */
    touch-action:auto;
}
.xdsc-close{
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff;
    border:none;
    cursor:pointer;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease;
    -webkit-tap-highlight-color:transparent;
    padding:0;
    line-height:1;
}
.xdsc-close:hover{background:rgba(255,255,255,.22)}
.xdsc-close:active{transform:scale(.92)}

.xdsc-meta{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:13px;
    font-weight:600;
    /* مطلوب: السماح لأبناء الـ flex بالـ overflow (السحب الأفقي للأقسام) */
    min-width:0;
    flex:1;
}
.xdsc-counter{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,.12);
    padding:6px 12px;
    border-radius:18px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    font-variant-numeric:tabular-nums;
}
.xdsc-streak{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:linear-gradient(135deg,#ff6b00,#ffaa00);
    padding:6px 12px;
    border-radius:18px;
    font-weight:700;
    box-shadow:0 2px 8px rgba(255,107,0,.35);
}
.xdsc-streak[hidden]{display:none}

/* Mute toggle — صغير وخفيف */
.xdsc-mute{
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    border:none;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    line-height:1;
    transition:background .2s ease,transform .15s ease;
    -webkit-tap-highlight-color:transparent;
    padding:0;
    opacity:.85;
}
.xdsc-mute:hover{background:rgba(255,255,255,.2);opacity:1}
.xdsc-mute:active{transform:scale(.92)}
.xdsc-mute[data-muted="true"]{opacity:.55}

/* ============================================================
   4. Stage — حاوية الكروت
   ============================================================ */
.xdsc-stage{
    position:relative;
    z-index:1;
    flex:1;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    padding-bottom:max(8px,env(safe-area-inset-bottom));
    /* منع pull-to-refresh المتصفح — الكروت لها touch handlers خاصة */
    touch-action:none;
}

/* ============================================================
   5. الكارت — الـ visual identity الكاملة
   ============================================================ */
.xdsc-card{
    position:absolute;
    width:100%;
    max-width:520px;
    height:100%;
    max-height:760px;
    background:#171717;
    border-radius:18px;
    overflow:hidden;
    box-shadow:
        0 24px 60px rgba(0,0,0,.55),
        0 6px 14px rgba(0,0,0,.4),
        inset 0 0 0 1px rgba(255,255,255,.04);
    display:flex;
    flex-direction:column;
    will-change:transform,opacity;
    transform:translateY(100%);
    opacity:0;
    transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .35s ease;
    -webkit-tap-highlight-color:transparent;
}
.xdsc-card.xdsc-active{
    transform:translateY(0);
    opacity:1;
}
.xdsc-card.xdsc-prev{
    transform:translateY(-110%);
    opacity:0;
}
.xdsc-card.xdsc-next{
    /* Peek: نظهر طرف الكارت التالي ~12% — إغراء بصري للسحب */
    transform:translateY(88%) scale(.96);
    opacity:.4;
    filter:brightness(.55);
}
/* الكارت اللي بعد التالي يفضل مخفي تماماً (perf + clarity) */
.xdsc-card.xdsc-next + .xdsc-card.xdsc-next{
    transform:translateY(100%);
    opacity:0;
    filter:none;
}

/* أثناء السحب — نلغي الـ transition */
.xdsc-card.xdsc-dragging{
    transition:none;
}

/* الصورة (نصف الكارت العلوي) */
.xdsc-card-image{
    position:relative;
    width:100%;
    height:54%;
    overflow:hidden;
    background:#0a0a0a;
    flex-shrink:0;
}
.xdsc-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.xdsc-card.xdsc-active .xdsc-card-image img{
    transform:scale(1.04);
}

/* Gradient overlay على الصورة */
.xdsc-card-image::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,
        rgba(0,0,0,.15) 0%,
        rgba(0,0,0,0) 35%,
        rgba(0,0,0,0) 60%,
        rgba(23,23,23,.95) 100%);
    pointer-events:none;
}

/* Category badge فوق الصورة */
.xdsc-category{
    position:absolute;
    top:14px;
    right:14px;
    background:rgba(0,0,0,.55);
    color:#fff;
    padding:6px 12px;
    border-radius:14px;
    font-size:12px;
    font-weight:700;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    z-index:2;
    max-width:60%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    border:1px solid rgba(255,255,255,.1);
}

/* Body — العنوان والوصف والـ meta */
.xdsc-card-body{
    flex:1;
    padding:18px 20px 14px;
    display:flex;
    flex-direction:column;
    color:#fff;
    overflow:hidden;
}
.xdsc-card-title{
    font-size:21px;
    font-weight:800;
    line-height:1.4;
    margin:0 0 10px;
    color:#fff;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.xdsc-card-meta-row{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
    color:rgba(255,255,255,.6);
    margin-bottom:12px;
    flex-wrap:wrap;
}
.xdsc-card-meta-row > span{
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.xdsc-card-excerpt{
    font-size:14px;
    line-height:1.7;
    color:rgba(255,255,255,.78);
    margin:0 0 16px;
    flex:1;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
}

/* Action buttons */
.xdsc-actions{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:8px;
    margin-top:auto;
}
.xdsc-btn{
    border:none;
    cursor:pointer;
    border-radius:12px;
    padding:13px 16px;
    font-size:14px;
    font-weight:700;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    transition:transform .15s ease,background .2s ease,box-shadow .2s ease;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    font-family:inherit;
}
.xdsc-btn:active{transform:scale(.96)}

.xdsc-btn-primary{
    background:linear-gradient(135deg,#1252A8 0%,#0A3D7C 100%);
    box-shadow:0 4px 14px rgba(18,82,168,.4);
}
.xdsc-btn-primary:hover{
    box-shadow:0 6px 18px rgba(18,82,168,.55);
}

.xdsc-btn-icon{
    background:rgba(255,255,255,.1);
    width:46px;
    padding:0;
    height:46px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.08);
}
.xdsc-btn-icon:hover{background:rgba(255,255,255,.18)}
.xdsc-btn-icon.xdsc-saved{
    background:linear-gradient(135deg,#ff4757,#ff6b81);
    border-color:transparent;
}

/* ============================================================
   6. Swipe hint
   ============================================================ */
.xdsc-hint{
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    color:rgba(255,255,255,.5);
    font-size:12px;
    pointer-events:none;
    z-index:2;
    animation:xdsc-hint-bounce 2s ease-in-out infinite;
    text-align:center;
}
.xdsc-hint .xdsc-arrow{
    display:block;
    font-size:18px;
    margin-bottom:2px;
}
@keyframes xdsc-hint-bounce{
    0%,100%{transform:translate(-50%,0);opacity:.5}
    50%{transform:translate(-50%,-6px);opacity:.85}
}
.xdsc-hint[hidden]{display:none}

/* ============================================================
   7. Loading / Empty / Error
   ============================================================ */
.xdsc-state{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    text-align:center;
    padding:30px;
    color:rgba(255,255,255,.7);
}
.xdsc-spinner{
    width:42px;
    height:42px;
    border:3px solid rgba(255,255,255,.15);
    border-top-color:#1252A8;
    border-radius:50%;
    animation:xdsc-spin 1s linear infinite;
}
@keyframes xdsc-spin{
    to{transform:rotate(360deg)}
}
.xdsc-state-icon{
    font-size:42px;
    opacity:.5;
}
.xdsc-state-title{
    font-size:17px;
    font-weight:700;
    color:#fff;
}
.xdsc-state-msg{
    font-size:13px;
    line-height:1.7;
    max-width:300px;
}
.xdsc-state-btn{
    margin-top:8px;
    padding:10px 22px;
    background:linear-gradient(135deg,#1252A8,#0A3D7C);
    color:#fff;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-weight:700;
    font-family:inherit;
    font-size:14px;
}

/* ============================================================
   8. Milestone toast
   ============================================================ */
.xdsc-milestone{
    position:absolute;
    top:80px;
    left:50%;
    transform:translateX(-50%) translateY(-20px);
    background:linear-gradient(135deg,#ff6b00,#ffaa00);
    color:#fff;
    padding:12px 22px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    box-shadow:0 8px 24px rgba(255,107,0,.5);
    opacity:0;
    pointer-events:none;
    z-index:10;
    transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}
.xdsc-milestone.xdsc-show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* ============================================================
   9. Responsive
   ============================================================ */
@media(min-width:769px){
    .xdsc-card{
        max-width:540px;
        max-height:720px;
    }
    .xdsc-card-title{font-size:23px}
    .xdsc-card-excerpt{font-size:15px;-webkit-line-clamp:5}
}
@media(min-width:1024px){
    .xdsc-card{max-width:580px}
}

/* iPhone notch / safe areas */
@supports(padding:max(0px)){
    .xdsc-header{padding-top:max(14px,env(safe-area-inset-top))}
    .xdsc-stage{
        padding-bottom:max(8px,env(safe-area-inset-bottom));
    }
}

/* لو الجوّال صغير جداً */
@media(max-height:600px){
    .xdsc-card-image{height:48%}
    .xdsc-card-title{font-size:18px;-webkit-line-clamp:2}
    .xdsc-card-excerpt{-webkit-line-clamp:2;font-size:13px}
}

/* === Light mode support: لا نغير الـ overlay (يبقى dark دايماً) === */
/* الـ FAB نفس الشكل في كل الحالات */

/* === Reduced motion: نعطّل الحركات === */
@media(prefers-reduced-motion:reduce){
    .xdsc-card,
    .xdsc-card-image img,
    .xdsc-fab,
    .xdsc-hint,
    .xdsc-milestone{
        animation:none!important;
        transition-duration:.01ms!important;
    }
}

/* === منع تحديد النص داخل الـ stage (يحسّن swipe) === */
.xdsc-stage,
.xdsc-card-image{
    user-select:none;
    -webkit-user-select:none;
}

/* === لو الزرار العائم متعطّل (الإعداد off) === */
.xdsc-fab[hidden]{display:none!important}

/* === منع scroll عن الـ body لما الـ overlay مفتوح === */
body.xdsc-active{
    overflow:hidden!important;
    overscroll-behavior:none;
    /* يمنع iOS bounce */
    position:fixed;
    width:100%;
}

/* ============================================================
   16. Pull-to-refresh indicator
   ============================================================ */
.xdsc-pull{
    position:absolute;
    top:60px;
    left:50%;
    transform:translate(-50%, -30px) scale(.7);
    width:48px;
    height:48px;
    border-radius:50%;
    background:linear-gradient(135deg,#FFB300,#FF6B00);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    box-shadow:0 4px 16px rgba(255,100,0,.5);
    z-index:6;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    will-change:transform, opacity;
}
.xdsc-pull.xdsc-pull-visible{opacity:1}
.xdsc-pull.xdsc-pull-ready{
    background:linear-gradient(135deg,#22C55E,#16A34A);
    box-shadow:0 4px 16px rgba(34,197,94,.5);
}
.xdsc-pull.xdsc-pull-loading{
    background:linear-gradient(135deg,#1252A8,#0A3D7C);
}
.xdsc-pull-icon{
    display:inline-block;
    transition:transform .3s cubic-bezier(.22,1,.36,1);
    line-height:1;
}
.xdsc-pull.xdsc-pull-ready .xdsc-pull-icon{
    transform:rotate(180deg);
}
.xdsc-pull.xdsc-pull-loading .xdsc-pull-icon{
    animation:xdsc-spin 1s linear infinite;
}

/* ============================================================
   17. Action toast (smart notifications)
   ============================================================ */
.xdsc-action-toast{
    position:absolute;
    bottom:24px;
    left:50%;
    transform:translateX(-50%) translateY(80px);
    background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);
    color:#fff;
    padding:14px 20px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 10px 30px rgba(0,0,0,.5);
    z-index:8;
    max-width:calc(100vw - 32px);
    min-width:240px;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1);
    -webkit-tap-highlight-color:transparent;
}
.xdsc-action-toast.xdsc-show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
    pointer-events:auto;
}
.xdsc-action-toast-icon{
    display:inline-block;
    font-size:22px;
    line-height:1;
    margin-left:8px;
    vertical-align:middle;
    animation:xdsc-bell 1.4s ease-in-out infinite;
}
@keyframes xdsc-bell{
    0%, 100%{transform:rotate(0)}
    20%     {transform:rotate(-12deg)}
    40%     {transform:rotate(12deg)}
    60%     {transform:rotate(-8deg)}
    80%     {transform:rotate(8deg)}
}
.xdsc-action-toast-title{
    font-weight:800;
    font-size:14px;
    display:inline-block;
    vertical-align:middle;
}
.xdsc-action-toast-sub{
    display:block;
    font-size:12px;
    color:rgba(255,255,255,.7);
    margin-top:3px;
    max-width:240px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.xdsc-action-toast:hover{
    background:linear-gradient(135deg,#334155 0%,#1e293b 100%);
}
.xdsc-action-toast:active{transform:translateX(-50%) translateY(0) scale(.97)}

/* ============================================================
   18. Quick Category Buttons في الـ header
   ============================================================ */
.xdsc-quick-cats{
    display:flex;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    flex:1;
    /* حرج: بدون min-width:0 الـ flex child لا يسمح بالـ overflow */
    min-width:0;
    margin:0 4px;
    padding:4px 14px;
    /* hide scrollbar */
    scrollbar-width:none;
    -ms-overflow-style:none;
    /* smooth mobile touch scrolling */
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    /* scroll-snap لتجربة أفضل */
    scroll-snap-type:x proximity;
}
.xdsc-quick-cats::-webkit-scrollbar{display:none}
.xdsc-quick-cats:empty{display:none}

.xdsc-quick-cat{
    flex-shrink:0;
    scroll-snap-align:center;
    background:linear-gradient(135deg,rgba(255,179,0,.18),rgba(255,107,0,.18));
    border:1px solid rgba(255,179,0,.35);
    color:#fff;
    padding:6px 11px;
    border-radius:16px;
    font-size:11.5px;
    font-weight:700;
    cursor:pointer;
    transition:transform .15s ease,background .2s ease;
    -webkit-tap-highlight-color:transparent;
    display:inline-flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
    font-family:inherit;
    line-height:1;
    /* منع أحداث اللمس المتعارضة مع السحب */
    touch-action:pan-x;
    user-select:none;
    -webkit-user-select:none;
}
.xdsc-quick-cat:hover{
    background:linear-gradient(135deg,rgba(255,179,0,.32),rgba(255,107,0,.32));
}
.xdsc-quick-cat:active{transform:scale(.94)}
.xdsc-quick-cat-emoji{
    display:inline-block;
    font-size:14px;
    line-height:1;
}

/* ============================================================
   19. Right-swipe back indicator (Facebook-style)
   ============================================================ */
.xdsc-back-hint{
    position:absolute;
    top:50%;
    left:14px;
    transform:translateY(-50%) translateX(-100%);
    background:rgba(0,0,0,.6);
    color:#fff;
    padding:10px 14px;
    border-radius:20px;
    font-size:13px;
    font-weight:700;
    z-index:7;
    opacity:0;
    pointer-events:none;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:none;
}
.xdsc-back-hint.xdsc-show{
    opacity:1;
}
.xdsc-back-hint-icon{
    display:inline-block;
    margin-left:6px;
}

/* ============================================================
   21. Newsflash Card — تنبيه خبر جديد فوق الـ FAB
   ============================================================ */
.xdsc-newsflash{
    position:fixed;
    bottom:154px;          /* فوق الـ FAB الـ wrap (bottom:88 + height:58 + 8px gap) */
    left:18px;
    width:300px;
    max-width:calc(100vw - 36px);
    z-index:10002;  /* فوق الـ article panel (10001) والـ overlay (9999) */
    background:linear-gradient(135deg,#ffffff 0%,#fff8f0 100%);
    border-radius:16px;
    padding:0;
    overflow:hidden;
    box-shadow:
        0 12px 36px rgba(220, 38, 38, .35),
        0 4px 12px rgba(0, 0, 0, .25),
        inset 0 0 0 1.5px rgba(255, 70, 70, .4);
    cursor:pointer;
    transform:translateY(20px) scale(.92);
    opacity:0;
    pointer-events:none;
    transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
    -webkit-tap-highlight-color:transparent;
    will-change:transform, opacity;
    /* Pulse subtle عشان يلفت الانتباه */
    animation:xdsc-newsflash-pulse 2.4s ease-in-out infinite;
}
.xdsc-newsflash.xdsc-show{
    transform:translateY(0) scale(1);
    opacity:1;
    pointer-events:auto;
}
@keyframes xdsc-newsflash-pulse{
    0%, 100%{box-shadow:0 12px 36px rgba(220, 38, 38, .35),0 4px 12px rgba(0, 0, 0, .25),inset 0 0 0 1.5px rgba(255, 70, 70, .4)}
    50%     {box-shadow:0 14px 40px rgba(220, 38, 38, .50),0 4px 12px rgba(0, 0, 0, .25),inset 0 0 0 2px rgba(255, 70, 70, .7)}
}

.xdsc-newsflash-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:linear-gradient(135deg,#DC2626,#B91C1C);
    color:#fff;
    padding:6px 12px 5px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.3px;
    border-radius:0 0 12px 0;
    box-shadow:0 2px 4px rgba(0,0,0,.15);
    line-height:1;
    text-transform:none;
}
.xdsc-newsflash-dot{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 2px rgba(255,255,255,.4);
    animation:xdsc-newsflash-dot 1.2s ease-in-out infinite;
}
@keyframes xdsc-newsflash-dot{
    0%, 100%{transform:scale(1);opacity:1}
    50%     {transform:scale(.6);opacity:.5}
}

.xdsc-newsflash-dismiss{
    position:absolute;
    top:8px;
    left:8px;
    width:26px;
    height:26px;
    border-radius:50%;
    background:rgba(0,0,0,.45);
    color:#fff;
    border:none;
    cursor:pointer;
    font-size:14px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease, transform .15s ease;
    z-index:3;
    -webkit-tap-highlight-color:transparent;
    padding:0;
}
.xdsc-newsflash-dismiss:hover{background:rgba(0,0,0,.65)}
.xdsc-newsflash-dismiss:active{transform:scale(.88)}

.xdsc-newsflash-content{
    display:flex;
    gap:10px;
    padding:8px 12px 12px;
    align-items:center;
}
.xdsc-newsflash-image{
    width:62px;
    height:62px;
    flex-shrink:0;
    border-radius:10px;
    overflow:hidden;
    background:#f1f5f9;
    position:relative;
}
.xdsc-newsflash-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.xdsc-newsflash-image::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,transparent 60%,rgba(220,38,38,.18) 100%);
    pointer-events:none;
}
.xdsc-newsflash-text{
    flex:1;
    min-width:0;
    direction:rtl;
}
.xdsc-newsflash-category{
    display:block;
    font-size:10.5px;
    font-weight:700;
    color:#DC2626;
    margin-bottom:3px;
    text-transform:uppercase;
    letter-spacing:.4px;
}
.xdsc-newsflash-title{
    margin:0;
    font-size:13.5px;
    font-weight:800;
    color:#0f172a;
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.xdsc-newsflash-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    background:linear-gradient(135deg,#FFB300,#FF6B00);
    color:#fff;
    padding:7px;
    font-size:11.5px;
    font-weight:800;
    border-top:1px solid rgba(0,0,0,.05);
    cursor:pointer;
}
.xdsc-newsflash-cta-arrow{
    display:inline-block;
    transition:transform .2s ease;
}
.xdsc-newsflash:hover .xdsc-newsflash-cta-arrow{
    transform:translateX(-3px);
}

/* لما الـ overlay مفتوح بس الـ panel مش مفتوح — ما نعرضش newsflash (موجود toast بديل) */
body.xdsc-active .xdsc-newsflash{
    /* مش بنخفيه تماماً — نخليه يظهر فوق الـ panel لو موجود */
}

/* Reduced motion: نشيل الـ pulse */
@media(prefers-reduced-motion:reduce){
    .xdsc-newsflash,
    .xdsc-newsflash-dot{
        animation:none!important;
    }
}

/* Responsive */
@media(max-width:380px){
    .xdsc-newsflash{width:calc(100vw - 36px)}
}
@media(min-width:769px){
    .xdsc-newsflash{bottom:170px;width:330px}
    .xdsc-newsflash-image{width:72px;height:72px}
    .xdsc-newsflash-title{font-size:14.5px}
}

/* ============================================================
   20. Forward-swipe (reopen) indicator
   ============================================================ */
.xdsc-fwd-hint{
    position:absolute;
    top:50%;
    right:14px;
    transform:translateY(-50%) translateX(100%);
    background:rgba(18,82,168,.85);
    color:#fff;
    padding:10px 14px;
    border-radius:20px;
    font-size:13px;
    font-weight:700;
    z-index:7;
    opacity:0;
    pointer-events:none;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:none;
}
.xdsc-fwd-hint.xdsc-show{
    opacity:1;
}

/* ============================================================
   10. Double-Tap Heart Burst
   ============================================================ */
.xdsc-heart-burst{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    font-size:88px;
    line-height:1;
    z-index:4;
    pointer-events:none;
    text-shadow:0 4px 24px rgba(255,30,80,.6);
    animation:xdsc-heart .82s cubic-bezier(.17,.89,.32,1.28) forwards;
    will-change:transform,opacity;
}
@keyframes xdsc-heart{
    0%   {transform:translate(-50%,-50%) scale(0) rotate(-8deg);opacity:0}
    18%  {transform:translate(-50%,-50%) scale(1.35) rotate(2deg);opacity:1}
    50%  {transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
    80%  {transform:translate(-50%,-50%) scale(1.05);opacity:.95}
    100% {transform:translate(-50%,-65%) scale(.9);opacity:0}
}

/* ============================================================
   11. Quick Reactions Bar
   ============================================================ */
.xdsc-reactions{
    display:flex;
    gap:8px;
    margin:0 0 12px;
    justify-content:flex-start;
    flex-wrap:nowrap;
}
.xdsc-reaction{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s ease;
    -webkit-tap-highlight-color:transparent;
    line-height:1;
    padding:0;
    font-family:inherit;
}
.xdsc-reaction:hover{background:rgba(255,255,255,.18)}
.xdsc-reaction:active{transform:scale(.92)}
.xdsc-reaction.xdsc-reacted{
    transform:scale(1.22);
    background:linear-gradient(135deg,#ff6b00,#ff4757);
    border-color:transparent;
    box-shadow:0 4px 14px rgba(255,75,87,.5);
}
.xdsc-reaction.xdsc-pop{
    animation:xdsc-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes xdsc-pop{
    0%  {transform:scale(1)}
    50% {transform:scale(1.4)}
    100%{transform:scale(1.22)}
}

/* ============================================================
   12. Nudge animation (8s inactivity)
   ============================================================ */
@keyframes xdsc-nudge{
    0%, 100%{transform:translateY(0)}
    25%     {transform:translateY(-8px)}
    55%     {transform:translateY(4px)}
    80%     {transform:translateY(-2px)}
}
.xdsc-card.xdsc-active.xdsc-nudge{
    animation:xdsc-nudge .65s ease;
}
/* الكارت اللي بعده (الـ peek) يعمل bounce بسيطة */
@keyframes xdsc-peek-bounce{
    0%, 100%{transform:translateY(88%) scale(.96)}
    50%     {transform:translateY(82%) scale(.97)}
}
.xdsc-card.xdsc-next.xdsc-peek-bounce{
    animation:xdsc-peek-bounce .8s ease;
}

/* ============================================================
   13. Counter bounce على التغيير
   ============================================================ */
.xdsc-counter-current{
    display:inline-block;
    transition:transform 0s;
}
@keyframes xdsc-count-bounce{
    0%  {transform:scale(1)}
    40% {transform:scale(1.4)}
    100%{transform:scale(1)}
}
.xdsc-counter-current.xdsc-bouncing{
    animation:xdsc-count-bounce .36s cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   14. Article Panel — slide-up iframe
   ============================================================ */
.xdsc-article-panel{
    position:fixed;
    inset:0;
    top:10vh;
    z-index:10001;
    background:#fff;
    border-radius:18px 18px 0 0;
    overflow:hidden;
    transform:translateY(100%);
    transition:transform .4s cubic-bezier(.22,1,.36,1);
    box-shadow:0 -16px 40px rgba(0,0,0,.4);
    display:flex;
    flex-direction:column;
    contain:layout style;
    will-change:transform;
}
.xdsc-article-panel.xdsc-open{
    transform:translateY(0);
}

.xdsc-panel-header{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    background:#fff;
    border-bottom:1px solid #E5E7EB;
    flex-shrink:0;
    position:relative;
}
/* drag handle شريط صغير فوق */
.xdsc-panel-header::before{
    content:'';
    position:absolute;
    top:6px;
    left:50%;
    transform:translateX(-50%);
    width:42px;
    height:4px;
    border-radius:2px;
    background:#CBD5E1;
}
.xdsc-panel-title{
    flex:1;
    font-size:13px;
    font-weight:700;
    color:#0F172A;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-top:6px;
}
.xdsc-panel-btn{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#F1F5F9;
    border:none;
    color:#0F172A;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease;
    margin-top:6px;
    padding:0;
    flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
}
.xdsc-panel-btn:hover{background:#E2E8F0}
.xdsc-panel-btn:active{transform:scale(.92)}

.xdsc-panel-body{
    flex:1;
    overflow:hidden;
    position:relative;
    background:#F7F8FA;
    overscroll-behavior:contain;
    touch-action:auto;
}

/* Edge swipe zone — شريط شفاف على يسار الـ panel body
   يلتقط swipe-to-close حتى لو الـ iframe بياخد الـ touch events
   ✦ touch-action: pan-y → يسمح للـ vertical scroll يمر للـ iframe
                          لكن يمنع iOS من interception للـ horizontal */
.xdsc-panel-edge{
    position:absolute;
    top:0;
    left:0;
    width:55px;                    /* أعرض = أسهل على الفون */
    height:100%;
    z-index:10;                    /* فوق الـ iframe بوضوح */
    background:transparent;
    -webkit-tap-highlight-color:transparent;
    touch-action:pan-y;            /* مهم: يمنع iOS system back gesture */
    cursor:grab;
}
/* hint بصري خفيف على اليسار (يفهّم الزائر إن في swipe area) */
.xdsc-panel-edge::before{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:4px;
    background:linear-gradient(180deg,
        transparent 0%,
        rgba(255,179,0,.55) 25%,
        rgba(255,107,0,.55) 75%,
        transparent 100%);
    border-radius:0 3px 3px 0;
    opacity:0;
    pointer-events:none;
    animation:xdsc-edge-hint 4.5s ease-out 1;
}
@keyframes xdsc-edge-hint{
    0%   {opacity:0;transform:translateX(-4px)}
    15%  {opacity:1;transform:translateX(0)}
    50%  {opacity:.8}
    100% {opacity:0;transform:translateX(-2px)}
}
/* لما السحب نشط، نوسّع الـ edge عشان نلتقط الباقي + hide الـ hint */
.xdsc-panel-edge.xdsc-panel-edge-active{
    width:100%;
    touch-action:none;
}
.xdsc-panel-edge.xdsc-panel-edge-active::before{
    display:none;
}
/* Animation عند السحب — يخلي الـ panel "يجي معاك" */
.xdsc-article-panel.xdsc-dragging{
    transition:none!important;
}
.xdsc-panel-iframe{
    width:100%;
    height:100%;
    border:0;
    background:#F7F8FA;
    /* Fade-in: نخفي الـ iframe لحد ما يحمّل عشان نتفادى الـ white flash */
    opacity:0;
    transition:opacity .28s ease;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:auto;
    /* GPU layer — يسرّع الـ scroll جوه الـ iframe */
    will-change:transform;
    contain:layout style;
    pointer-events:auto;
}
.xdsc-panel-iframe.xdsc-loaded{
    opacity:1;
}
.xdsc-panel-loading{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#F7F8FA;
    z-index:2;
    transition:opacity .3s ease;
}
.xdsc-panel-loading.xdsc-hide{
    opacity:0;
    pointer-events:none;
}
.xdsc-panel-loading .xdsc-spinner{
    border-color:rgba(0,0,0,.1);
    border-top-color:#1252A8;
}

/* لما الـ panel مفتوح، الـ overlay الأصلي ميتأثرش لكن نخلي الـ stage مش متفاعل */
.xdsc-overlay.xdsc-panel-active .xdsc-stage{
    pointer-events:none;
}

/* === Embed mode: لما article.php اتفتحت داخل iframe من Discover === */
body.xdsc-embed{
    background:#fff!important;
    padding-top:0!important;
}
body.xdsc-embed .breaking-bar,
body.xdsc-embed .main-header,
body.xdsc-embed .pg-footer,
body.xdsc-embed .back-top,
body.xdsc-embed .xdsc-fab,
body.xdsc-embed [class*="sticky"],
body.xdsc-embed .scroll-to-top,
body.xdsc-embed .footer-ad,
body.xdsc-embed #wpadminbar{
    display:none!important;
}
body.xdsc-embed .pg-wrap{
    border:0!important;
    box-shadow:none!important;
    width:100%!important;
    max-width:100%!important;
}
body.xdsc-embed .container{
    padding:14px 12px;
    max-width:100%;
}

/* ============================================================
   15. Mobile-specific tweaks للـ article panel
   ============================================================ */
@media(max-width:768px){
    .xdsc-article-panel{top:6vh}
}