/* ========================================
   NEXUS — Concept visuals (inline SVG/CSS, no assets)
   ======================================== */

/* ============================================================
   1) قبل / بعد — الفكرة كاملة في مشهد واحد
   ============================================================ */
.ba {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 28px;
    align-items: stretch;
}

.ba__side {
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
}

.ba__side--before {
    background: linear-gradient(180deg, var(--color-danger-soft) 0%, transparent 55%), var(--color-card-bg);
}

.ba__side--after {
    background: linear-gradient(180deg, rgba(46, 123, 214, 0.09) 0%, transparent 55%), var(--color-card-bg);
    border-color: var(--color-primary-line);
}

.ba__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: var(--radius-pill);
    margin-bottom: 22px;
}

.ba__tag--before {
    color: var(--color-danger-text);
    background: var(--color-danger-soft);
    border: 1px solid var(--color-danger-line);
}

.ba__tag--after {
    color: var(--color-primary-bright);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-line);
}

/* شجرة الرد الآلي */
.ivr {
    display: grid;
    gap: 9px;
    flex: 1;
}

.ivr__step {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.9rem;
    color: var(--color-text-gray);
    background: var(--color-surface-wash);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
}

/* كل خطوة أبهت من سابقتها — إحساس الاستنزاف */
.ivr__step:nth-child(2) {
    opacity: 0.82;
}

.ivr__step:nth-child(3) {
    opacity: 0.64;
}

.ivr__step--wait {
    opacity: 0.5;
    color: var(--color-danger-text);
    border-style: dashed;
}

.ivr__key {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-white);
    background: var(--color-border);
    border-radius: 5px;
}

/* المحادثة */
.chat {
    display: grid;
    gap: 10px;
    flex: 1;
}

.chat__msg {
    border-radius: var(--radius);
    padding: 12px 15px;
    font-size: 0.9rem;
}

.chat__msg--user {
    background: var(--color-surface-wash);
    border: 1px solid var(--color-border);
    margin-inline-start: 22px;
}

.chat__msg--bot {
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-line);
    margin-inline-end: 22px;
}

.chat__who {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.chat__msg--bot .chat__who {
    color: var(--color-primary-bright);
}

.chat__msg p {
    color: var(--color-text-body);
}

.chat__done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-success-text);
    background: var(--color-success-soft);
    border: 1px solid var(--color-success-line);
    border-radius: var(--radius-pill);
    padding: 4px 11px;
}

/* ظهور متدرّج للرسائل */
[data-chat] .chat__msg {
    opacity: 0;
    transform: translateY(8px);
}

[data-chat].is-playing .chat__msg {
    animation: chatIn 0.45s ease forwards;
}

[data-chat].is-playing .chat__msg:nth-child(1) {
    animation-delay: 0.05s;
}

[data-chat].is-playing .chat__msg:nth-child(2) {
    animation-delay: 0.85s;
}

[data-chat].is-playing .chat__msg:nth-child(3) {
    animation-delay: 1.65s;
}

[data-chat].is-playing .chat__msg:nth-child(4) {
    animation-delay: 2.3s;
}

@keyframes chatIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ba__outcome {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    font-size: 0.88rem;
    font-weight: 500;
}

.ba__outcome--bad {
    color: var(--color-danger-text);
}

.ba__outcome--good {
    color: var(--color-success-text);
}

.ba__arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-primary-bright);
}

.ba__arrow-line {
    width: 1px;
    flex: 1;
    background: linear-gradient(180deg, transparent, var(--color-primary-line), transparent);
}

/* ============================================================
   2) كيف يعمل — مخطط التدفق
   ============================================================ */
.flow {
    margin: 0;
}

.flow svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.flow__disc {
    fill: var(--color-card-bg);
    stroke: var(--color-border-strong);
    stroke-width: 1.5;
}

.flow__disc--key {
    fill: var(--color-primary-soft);
    stroke: var(--color-primary-bright);
    stroke-width: 2;
}

.flow__ico {
    fill: none;
    stroke: var(--color-primary-bright);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flow__ico--key {
    stroke: var(--color-secondary);
    stroke-width: 3;
}

.flow__label {
    text-anchor: middle;
    fill: var(--color-text-white);
    font-size: 15px;
    font-weight: 600;
}

.flow__label--key {
    fill: var(--color-secondary);
}

.flow__note {
    text-anchor: middle;
    font-size: 11.5px;
}

.flow__caption {
    margin-top: 26px;
    text-align: center;
    font-size: 1rem;
    color: var(--color-text-gray);
}

/* ============================================================
   3) أنماط التشغيل الثلاثة
   ============================================================ */
.modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.modes__item {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
}

.modes__bar {
    height: 6px;
    border-radius: 3px;
    background: var(--color-surface-wash);
    overflow: hidden;
    margin-bottom: 20px;
}

.modes__fill {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.modes__fill--auto {
    background: var(--color-primary-bright);
}

.modes__fill--triage {
    background: var(--color-secondary);
}

.modes__fill--copilot {
    background: var(--viz-series-3);
}

.modes__title {
    font-size: 1.08rem;
    margin-bottom: 10px;
}

.modes__text {
    font-size: 0.93rem;
    color: var(--color-text-gray);
    margin-bottom: 16px;
}

.modes__tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    background: var(--color-surface-wash);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
}

.modes__note {
    margin-top: 24px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--color-text-gray);
}

/* ============================================================
   4) مخطط السيادة
   ============================================================ */
.sov-diagram svg,
.channels svg,
.loop svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.sov__box {
    fill: var(--color-card-bg);
    stroke: var(--color-border-strong);
    stroke-width: 1.5;
}

.sov__box--key {
    fill: var(--color-primary-soft);
    stroke: var(--color-primary-bright);
    stroke-width: 2;
}

.sov__title {
    text-anchor: middle;
    fill: var(--color-text-white);
    font-size: 15px;
    font-weight: 600;
}

.sov__title--key {
    fill: var(--color-primary-bright);
}

.sov__note {
    text-anchor: middle;
    font-size: 11.5px;
}

.sov__for {
    text-anchor: middle;
    font-size: 12px;
    fill: var(--viz-label);
}

.sov__for--key {
    fill: var(--color-secondary-light);
    font-weight: 600;
}

.sov__ico {
    fill: none;
    stroke: var(--color-text-gray);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sov__ico--key {
    stroke: var(--color-primary-bright);
    stroke-width: 2;
}

.sov__wall {
    stroke: var(--color-secondary);
    stroke-width: 2;
    stroke-dasharray: 7 6;
    opacity: 0.75;
}

.sov__wall-label,
.sov__scale {
    text-anchor: middle;
    font-size: 11.5px;
    fill: var(--color-text-muted);
}

.sov__wall-label {
    fill: var(--color-secondary-light);
}

/* ============================================================
   5) القنوات الخمس
   ============================================================ */
.ch__node rect {
    fill: var(--color-card-bg);
    stroke: var(--color-border-strong);
    stroke-width: 1.4;
}

.ch__node--key rect {
    fill: var(--color-secondary-soft);
    stroke: var(--color-secondary);
}

.ch__node--out rect {
    fill: color-mix(in srgb, var(--viz-series-3) 12%, transparent);
    stroke: color-mix(in srgb, var(--viz-series-3) 52%, transparent);
}

.ch__label {
    text-anchor: middle;
    fill: var(--color-text-body);
    font-size: 13px;
}

.ch__label--key {
    fill: var(--color-secondary-light);
    font-weight: 600;
}

.ch__wire path {
    fill: none;
    stroke: var(--color-primary-line);
    stroke-width: 1.5;
}

.ch__wire--out path {
    stroke: color-mix(in srgb, var(--viz-series-3) 52%, transparent);
}

.ch__core {
    fill: var(--color-primary-soft);
    stroke: var(--color-primary-bright);
    stroke-width: 2;
}

.ch__core-title {
    text-anchor: middle;
    fill: var(--color-primary-bright);
    font-size: 16px;
    font-weight: 700;
}

.ch__core-note {
    text-anchor: middle;
    font-size: 11.5px;
    fill: var(--viz-label);
}

/* ============================================================
   6) حلقة Smart Loop
   ============================================================ */
.loop__node circle {
    fill: var(--color-card-bg);
    stroke: var(--color-border-strong);
    stroke-width: 1.5;
}

.loop__node--agent circle {
    fill: var(--color-primary-soft);
    stroke: var(--color-primary-bright);
    stroke-width: 2;
}

.loop__node--human circle {
    fill: var(--color-secondary-soft);
    stroke: var(--color-secondary);
    stroke-width: 2;
}

.loop__label {
    text-anchor: middle;
    fill: var(--color-text-white);
    font-size: 14px;
    font-weight: 600;
}

.loop__note {
    text-anchor: middle;
    font-size: 11px;
    fill: var(--viz-label);
}

.loop__wire path {
    fill: none;
    stroke: var(--color-primary-bright);
    stroke-width: 1.8;
}

.loop__wire--back path {
    stroke: var(--color-secondary);
    stroke-dasharray: 6 5;
}

.loop__wire--dash {
    stroke: var(--color-border-strong);
    stroke-width: 1.4;
    stroke-dasharray: 4 4;
}

.loop__wire-label {
    text-anchor: middle;
    font-size: 11.5px;
    fill: var(--viz-label);
}

.loop__wire-label--back {
    fill: var(--color-secondary-light);
}

.loop__learn rect {
    fill: color-mix(in srgb, var(--viz-series-3) 12%, transparent);
    stroke: color-mix(in srgb, var(--viz-series-3) 48%, transparent);
    stroke-width: 1.4;
}

.loop__learn-label {
    text-anchor: middle;
    font-size: 11.5px;
    fill: var(--color-success-text);
}

/* ============================================================
   7) إطار بصري عام
   ============================================================ */
.viz-frame {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
}

@media (max-width: 900px) {
    .modes {
        grid-template-columns: 1fr;
    }

    .ba {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ba__arrow {
        flex-direction: row;
        height: 36px;
    }

    .ba__arrow svg {
        transform: rotate(-90deg);
    }

    .ba__arrow-line {
        width: auto;
        height: 1px;
        flex: 1;
        background: linear-gradient(90deg, transparent, var(--color-primary-line), transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-chat] .chat__msg {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}

/* ============================================================
   نسختا المخطط: سطح المكتب والجوال
   ------------------------------------------------------------
   المخططات الكثيفة (عقد وصناديق متجاورة أفقياً) لا يكفيها تكبير
   الخط: فالحجم المعروض = حجم الخط × (عرض اللوحة ÷ عرض viewBox)،
   وعرض اللوحة على الجوال ~335px. تكبير الخط 2× في لوحة عرضها 880
   وحدة يجعل التسمية الواحدة أعرض من المسافة بين عقدتين. لذلك لكل
   مخطط منها نسخة ثانية بتخطيط رأسي ولوحة بعرض ~340 وحدة، فيصبح
   المعامل ~1 وتُعرض الخطوط بحجمها المكتوب دون أي تكبير.

   النسختان تحملان النص نفسه حرفاً بحرف؛ المخفية بـ display:none
   تخرج من شجرة الإتاحة فلا يُقرأ المحتوى مرّتين.
   ============================================================ */
.viz-m {
    display: none;
}

@media (max-width: 900px) {

    .flow .viz-d,
    .sov-diagram .viz-d,
    .channels .viz-d,
    .loop .viz-d {
        display: none;
    }

    .flow .viz-m,
    .sov-diagram .viz-m,
    .channels .viz-m,
    .loop .viz-m {
        display: block;
        max-width: 430px;
        margin-inline: auto;
    }

    /* نص عربي (rtl): start = الحافة اليمنى — التسميات تتدلّى يساراً
       من عمود العقد الثابت على اليمين. */
    .viz-m .flow__label,
    .viz-m .flow__note,
    .viz-m .sov__title,
    .viz-m .sov__note,
    .viz-m .sov__for {
        text-anchor: start;
    }

    /* .viz-label--en تضبط direction:ltr ⇒ ينقلب معنى الطرفين داخلها:
       end هو الحافة اليمنى. بدون هذه القاعدة يتدلّى النص اللاتيني
       يميناً فيخرج من صندوقه (مثل «Air-Gapped»). */
    .viz-m .flow__label.viz-label--en,
    .viz-m .flow__note.viz-label--en,
    .viz-m .sov__title.viz-label--en,
    .viz-m .sov__note.viz-label--en,
    .viz-m .sov__for.viz-label--en {
        text-anchor: end;
    }

    /* تدرّج الحجم داخل النسخة الجوالية.
       تنبيه: charts.css يُحمّل بعد هذا الملف، فقاعدة .viz-label
       (12px) تغلب .flow__label و.sov__title وأخواتها لتساوي
       الانتقاء. الانتقاء هنا (0,2,0) يستعيد التدرّج — والأرضية
       11px ⇒ ~10.8px معروضة على لوحة بعرض 340 وحدة. */
    .viz-m .flow__label,
    .viz-m .sov__title,
    .viz-m .loop__label {
        font-size: 14px;
    }

    .viz-m .ch__core-title {
        font-size: 16px;
    }

    .viz-m .ch__label,
    .viz-m .sov__for {
        font-size: 12.5px;
    }

    .viz-m .flow__note,
    .viz-m .sov__note,
    .viz-m .sov__wall-label,
    .viz-m .sov__scale,
    .viz-m .ch__core-note,
    .viz-m .loop__note,
    .viz-m .loop__wire-label,
    .viz-m .loop__learn-label {
        font-size: 11.5px;
    }
}