/*
 * market_pulse.css - تصميم مكوّنات الصفحة الرئيسية الحية.
 * يعتمد متغيّرات الثيم الموجودة ويعمل في الاتجاهين (RTL/LTR) عبر
 * الخصائص المنطقية (inline-start/end) بدل left/right.
 */

/* ===================== شريط الأسعار ===================== */
.price-ticker {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(90deg, rgba(8, 12, 28, 0.96), rgba(12, 18, 40, 0.96));
    border-block: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
    position: relative;
    z-index: 5;
    /* ترويسة الموقع position:fixed بارتفاع ~70px والصفحة تعوّضها داخل .hero،
       فبدون هذه الإزاحة كان الشريط يُرسم **تحت الترويسة ولا يُرى إطلاقاً**.
       min-height يمنع قفزة التخطيط عند وصول الأسعار ومحلّ هيكل التحميل. */
    margin-block-start: 70px;
    min-height: 42px;
}

@media (max-width: 768px) {
    .price-ticker {
        margin-block-start: 65px;
    }
}

/* الشريط يعوّض عن نفسه: نقلّص الحشوة العلوية للبطل بنفس المقدار */
.price-ticker + .hero {
    padding-block-start: 2.5rem;
}

.ticker-label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #00f2ea;
    background: rgba(0, 242, 234, 0.06);
    border-inline-end: 1px solid rgba(255, 255, 255, 0.07);
    white-space: nowrap;
    flex-shrink: 0;
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00f2ea;
    box-shadow: 0 0 0 0 rgba(0, 242, 234, 0.7);
    animation: tk-pulse 2s infinite;
}

@keyframes tk-pulse {
    70% { box-shadow: 0 0 0 8px rgba(0, 242, 234, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 242, 234, 0); }
}

.ticker-viewport {
    overflow: hidden;
    flex: 1;
    /* حاسم في الواجهة العربية: الحركة translateX(-50%) تفترض تدفقاً LTR.
       بدون تثبيت الاتجاه هنا كان الشريط ينزلق بعيداً ويترك فراغاً أبيض
       لكل مستخدمي العربية (وهم عملياً كل المستخدمين). */
    direction: ltr;
    /* تلاشٍ عند الحافتين ليبدو الشريط لانهائياً */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    padding: 11px 20px;
    white-space: nowrap;
    animation: ticker-scroll 60s linear infinite;
    will-change: transform;
    /* الأرقام تبقى LTR حتى في الواجهة العربية */
    direction: ltr;
}

.price-ticker:hover .ticker-track {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.ticker-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.82rem;
    font-family: 'Courier New', monospace;
}

.tk-sym { color: #cbd5e1; font-weight: 700; letter-spacing: 0.03em; }
.tk-price { color: #fff; }
.tk-chg { font-size: 0.76rem; font-weight: 700; }
.tk-chg.up { color: #00d984; }
.tk-chg.down { color: #ff4466; }
.ticker-skeleton { color: #64748b; font-size: 0.8rem; padding: 11px 0; }

/* ===================== الترويسة المشتركة ===================== */
/* الحشوة العلوية لنبض السوق أقل من السفلية عمداً: هو أول قسم بعد البطل،
   وكل بكسل هنا يقرّب الخريطة الحرارية من أن تُرى بلا تمرير. */
.pulse-section { padding-block: 1.6rem 2.4rem; }
.community-section { padding-block: 2.4rem; }

.pulse-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pulse-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: #fff;
}

.pulse-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(0, 242, 234, 0.1);
    border: 1px solid rgba(0, 242, 234, 0.28);
    color: #00f2ea;
}

/* شارة الحداثة في قسم المجتمع: JS يكتب فيها عمر أحدث تحليل ويضيف .live
   متى كان أحدث من ساعتين. الحياد هو الافتراضي - نقطة نابضة فوق صفوف عمرها
   يوم كانت تعد بما لا تفي به. الشارة الفارغة تُخفى فلا تظهر حبّة لونية جوفاء. */
.pulse-badge:empty { display: none; }

#feedFreshBadge {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0;
}

#feedFreshBadge.live {
    background: rgba(0, 217, 132, 0.1);
    border-color: rgba(0, 217, 132, 0.32);
    color: #00d984;
}
.pulse-sub { color: #94a3b8; font-size: 0.87rem; margin: 0; max-width: 62ch; }
.pulse-updated { color: #64748b; font-size: 0.78rem; font-family: monospace; }

/* ===================== تبويبات الفئات ===================== */
.pulse-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.pulse-tab {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    padding: 8px 15px;
    border-radius: 24px;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.22s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pulse-tab:hover { border-color: rgba(0, 242, 234, 0.4); color: #fff; }

.pulse-tab.active {
    background: linear-gradient(135deg, rgba(0, 242, 234, 0.16), rgba(0, 140, 255, 0.14));
    border-color: rgba(0, 242, 234, 0.55);
    color: #fff;
}

.tab-count {
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1px 7px;
}

/* ===================== شريط الاحتمالات الثلاثي =====================
   النموذج يُخرج توزيعاً كاملاً (صعودي/هبوطي/عرضي) وكانت الواجهة تعرض أكبرها
   فقط. الفرق ليس تجميلياً: "صعودي 78%" وحده غموض، و"78 صعودي مقابل 2 هبوطي"
   إجماع. هذا الشريط يُستعمل في البطاقة والجدول وبطاقة الصدارة معاً. */
.dist-bar {
    display: flex;
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.dist-bar span {
    display: block;
    height: 100%;
    /* الانتقال يجعل تحديث الأرقام كل ست ساعات محسوساً بلا وميض */
    transition: width 0.5s ease;
}

.seg-up { background: linear-gradient(90deg, #00b36b, #00d984); }
.seg-flat { background: linear-gradient(90deg, #d9a800, #ffc800); }
.seg-down { background: linear-gradient(90deg, #cc3355, #ff4466); }

.dist-key {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-family: monospace;
    font-size: 0.68rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.dist-key b { font-weight: 600; }
.up { color: #00d984; }
.down { color: #ff4466; }
.flat { color: #ffc800; }

/* ===================== الخريطة الحرارية ===================== */
.heatmap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.5rem; }

.hm-band { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }

.hm-label {
    font-size: 0.76rem;
    color: #94a3b8;
    padding-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; }

.hm-cell {
    position: relative;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 4px;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: inherit;
    /* الشفافية تُحسب من الثقة في JS عبر هذا المتغيّر */
    background: rgba(148, 163, 184, calc(var(--i, 0.3)));
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.hm-cell.dir-bullish { background: rgba(0, 217, 132, calc(var(--i, 0.3))); }
.hm-cell.dir-bearish { background: rgba(255, 68, 102, calc(var(--i, 0.3))); }
.hm-cell.dir-sideways { background: rgba(255, 200, 0, calc(var(--i, 0.3))); }

.hm-cell:hover, .hm-cell:focus-visible {
    transform: scale(1.12);
    border-color: rgba(255, 255, 255, 0.55);
    z-index: 2;
    outline: none;
}

/* التوسيط أفقياً لا يمكن أن يكون منطقياً: transform يتحرك دائماً نحو +X مهما
   كان اتجاه الصفحة، فلو تُرك مع inset-inline-start لانزاح التلميح خارج الخلية
   في أحد الاتجاهين. لذلك نصرّح بالحالتين. */
.hm-cell .hm-tip {
    position: absolute;
    inset-block-end: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #0b1020;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 0.68rem;
    font-weight: 500;
    color: #e2e8f0;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease;
    z-index: 5;
}

[dir="rtl"] .hm-cell .hm-tip {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

.hm-cell:hover .hm-tip, .hm-cell:focus-visible .hm-tip { opacity: 1; }

.hm-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 2px;
}

.hm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; }

/* ===================== بطاقة الصدارة + الجدول ===================== */
.pulse-body { display: grid; grid-template-columns: minmax(240px, 0.9fr) 1.9fr; gap: 14px; align-items: start; }

.lead {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02) 60%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
}

.lead.dir-bullish { background: linear-gradient(150deg, rgba(0, 217, 132, 0.10), rgba(255, 255, 255, 0.02) 60%); border-color: rgba(0, 217, 132, 0.28); }
.lead.dir-bearish { background: linear-gradient(150deg, rgba(255, 68, 102, 0.10), rgba(255, 255, 255, 0.02) 60%); border-color: rgba(255, 68, 102, 0.28); }
.lead.dir-sideways { background: linear-gradient(150deg, rgba(255, 200, 0, 0.10), rgba(255, 255, 255, 0.02) 60%); border-color: rgba(255, 200, 0, 0.28); }

.lead-eyebrow { font-family: monospace; font-size: 0.66rem; letter-spacing: 0.12em; color: #94a3b8; }
.lead.dir-bullish .lead-eyebrow { color: #00d984; }
.lead.dir-bearish .lead-eyebrow { color: #ff4466; }
.lead.dir-sideways .lead-eyebrow { color: #ffc800; }

.lead-sym { font-size: 1.75rem; font-weight: 800; color: #fff; line-height: 1.15; }
.lead-name { color: #94a3b8; font-size: 0.82rem; }
.lead-verdict { font-size: 1.25rem; font-weight: 800; }
.lead-price { font-family: monospace; font-size: 0.9rem; color: #cbd5e1; direction: ltr; text-align: start; font-variant-numeric: tabular-nums; }
.lead-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; }

.lead-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 2px;
    padding: 9px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.lead-cta:hover { background: rgba(0, 242, 234, 0.12); border-color: rgba(0, 242, 234, 0.45); }

/* ---- الجدول الحراري ---- */
.table-slot { overflow-x: auto; }

.heat-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 520px; }

.heat-table th {
    text-align: start;
    font-family: monospace;
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    color: #64748b;
    font-weight: 500;
    padding: 0 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.heat-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    vertical-align: middle;
}

.heat-table tbody tr:last-child td { border-bottom: 0; }
.heat-table tbody tr { transition: background 0.15s ease; }
.heat-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.heat-table tbody tr.is-lead { background: rgba(0, 242, 234, 0.05); }

.ht-sym { color: #fff; font-weight: 700; }
.ht-name { color: #64748b; font-size: 0.73rem; font-weight: 400; display: block; }
.ht-num { font-family: monospace; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; white-space: nowrap; color: #e2e8f0; }
.ht-bar { width: 32%; min-width: 110px; }
.ht-conv { font-family: monospace; font-variant-numeric: tabular-nums; font-weight: 700; direction: ltr; text-align: start; }

.verdict-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.pill-bullish { color: #00d984; background: rgba(0, 217, 132, 0.1); border: 1px solid rgba(0, 217, 132, 0.28); }
.pill-bearish { color: #ff4466; background: rgba(255, 68, 102, 0.1); border: 1px solid rgba(255, 68, 102, 0.28); }
.pill-sideways { color: #ffc800; background: rgba(255, 200, 0, 0.1); border: 1px solid rgba(255, 200, 0, 0.28); }

.pulse-more {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pulse-more:hover { border-color: rgba(0, 242, 234, 0.4); color: #fff; }

/* ===================== حالات التحميل والفراغ ===================== */
.skeleton {
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.03) 70%);
    background-size: 200% 100%;
    animation: sk 1.4s linear infinite;
    border-radius: 12px;
}

.sk-heat { height: 92px; margin-bottom: 1.5rem; }
.sk-lead { height: 190px; }
.sk-table { height: 190px; }
.sk-strip { height: 74px; }
.sk-row { height: 44px; }

@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.pulse-empty { color: #64748b; padding: 26px; text-align: center; grid-column: 1 / -1; }
/* تباين مقروء: #4b5563 كان 2.8:1 على الخلفية الداكنة - أضعف نص في الصفحة
   رغم أنه التنويه القانوني */
.pulse-disclaimer { margin-top: 14px; color: #94a3b8; font-size: 0.78rem; text-align: center; }

/* ===================== إجماع المجتمع ===================== */
/* "آخر 40 تحليلاً" قد تمتدّ أسبوعين في موقع هادئ فيبدو الرقم لحظياً وهو ليس
   كذلك. الخادم يختار نافذة زمنية صريحة (24س ثم 7أ ثم 30ي) ويُرسل حجم العيّنة،
   وهذه الشريحة تعرضهما نصاً - فيصحّ الرقم في الازدحام والهدوء معاً. */
.consensus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.con-cell {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
}

.con-k { font-size: 0.72rem; color: #64748b; }
.con-v { font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.35; font-variant-numeric: tabular-nums; }
.con-v small { font-size: 0.78rem; font-weight: 600; color: #94a3b8; }

.con-window {
    font-size: 0.76rem;
    color: #64748b;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.con-window b { color: #94a3b8; font-weight: 600; }

/* ---- بطاقات التجميع حسب الأصل ---- */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }

.group-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 15px 12px;
    animation: pc-in 0.4s ease both;
}

@keyframes pc-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.gc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.gc-sym { color: #fff; font-weight: 800; font-size: 1.02rem; }
.gc-meta { color: #64748b; font-size: 0.72rem; }
.gc-lean { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; margin-bottom: 7px; }
.gc-lean b { font-weight: 700; }
.gc-tally { font-family: monospace; font-size: 0.8rem; color: #94a3b8; font-variant-numeric: tabular-nums; direction: ltr; }
.gc-foot { display: flex; justify-content: space-between; margin-top: 9px; color: #64748b; font-size: 0.7rem; font-family: monospace; direction: ltr; }

/* ===================== تدفّق المجتمع (الأحدث) ===================== */
.feed-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.feed-row {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-inline-start: 3px solid transparent;
    border-radius: 12px;
    font-size: 0.85rem;
    animation: pc-in 0.4s ease both;
}

.feed-row.dir-bullish { border-inline-start-color: #00d984; }
.feed-row.dir-bearish { border-inline-start-color: #ff4466; }
.feed-row.dir-sideways { border-inline-start-color: #ffc800; }

.fr-user { font-family: monospace; color: #94a3b8; letter-spacing: 0.08em; }
.fr-sym { color: #fff; font-weight: 700; }
.fr-tf { font-family: monospace; font-size: 0.72rem; color: #64748b; background: rgba(255, 255, 255, 0.05); padding: 2px 7px; border-radius: 6px; direction: ltr; }
.fr-dir { font-weight: 700; }
.dir-bullish .fr-dir { color: #00d984; }
.dir-bearish .fr-dir { color: #ff4466; }
.dir-sideways .fr-dir { color: #ffc800; }
.fr-conf { font-family: monospace; color: #cbd5e1; font-variant-numeric: tabular-nums; }
.fr-time { color: #64748b; font-size: 0.72rem; white-space: nowrap; }

.feed-sub-title {
    font-size: 0.82rem;
    color: #94a3b8;
    margin: 22px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feed-sub-title::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); }

/* ===================== الشاشات الصغيرة ===================== */
@media (max-width: 900px) {
    .pulse-body { grid-template-columns: 1fr; }
    .lead { min-height: 0; }
}

@media (max-width: 768px) {
    /* حشوة علوية أصغر لنبض السوق: هو أول ما يلي البطل، وكل بكسل هنا يقرّب
       عنوانه من أن يُرى بلا تمرير على شاشة الجوال */
    .pulse-section { padding-block: 1.2rem 2rem; }
    .community-section { padding-block: 2rem; }
    .pulse-title { font-size: 1.25rem; }
    .pulse-head { margin-bottom: 0.8rem; }
    .hm-band { grid-template-columns: 1fr; gap: 5px; }
    .hm-label { padding-top: 0; font-size: 0.72rem; }
    /* مئة خلية على عرض 375 تعني 15 صفاً؛ تقليص الحشوة والخط يوفّر ~100px
       من الطول دون أن يفقد الرمز قابلية القراءة أو الخلية قابلية اللمس */
    .hm-cells { grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); gap: 3px; }
    .hm-cell { font-size: 0.6rem; padding: 4px 2px; border-radius: 5px; }
    .hm-legend { justify-content: flex-start; }
    .lead-sym { font-size: 1.5rem; }
    .feed-row { grid-template-columns: auto 1fr auto; row-gap: 6px; font-size: 0.8rem; }
    .fr-tf, .fr-user { display: none; }
    .group-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
    .group-grid { grid-template-columns: 1fr; }
    .hm-cells { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
    .group-card, .feed-row { animation: none; }
    .live-dot { animation: none; }
    .dist-bar span { transition: none; }
    .hm-cell { transition: none; }
}