// Customer Mobile — الدعم الذكي (بوصلة AI Chat)
function SupportScreen() {
  return (
    <div dir="rtl" lang="ar" style={{paddingTop: 50, paddingBottom: 24, background:'#ECEAE4', minHeight:'100%', fontFamily:'Rubik', display:'flex', flexDirection:'column'}}>
      {/* الترويسة */}
      <div style={{padding:'12px 18px 0', display:'flex', alignItems:'center', gap:12}}>
        <div style={{width:40, height:40, borderRadius:'50%', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
          <Ico.back className="flip-rtl"/>
        </div>
        <div style={{flex:1, display:'flex', alignItems:'center', gap:10}}>
          <div style={{width:38, height:38, borderRadius:12, background:'#0E1116', color:'#8FE5A8', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:800, fontSize:14, position:'relative'}}>
            ب<span style={{position:'absolute', bottom:-2, insetInlineEnd:-2, width:11, height:11, background:'#8FE5A8', border:'2px solid #ECEAE4', borderRadius:'50%'}}/>
          </div>
          <div>
            <div style={{fontSize:14, fontWeight:700}}>بوصلة <span style={{fontSize:10, color:'#5B6270', fontWeight:500}}>مساعدك الذكي</span></div>
            <div style={{fontSize:10, color:'#0E8A4A', marginTop:1, display:'flex', alignItems:'center', gap:4}}>
              <span style={{width:5, height:5, background:'#0E8A4A', borderRadius:'50%'}}/> جاهز للمساعدة
            </div>
          </div>
        </div>
        <div style={{width:40, height:40, borderRadius:'50%', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', color:'#5B6270', fontSize:14, fontWeight:600}}>?</div>
      </div>

      {/* شريط معلومات */}
      <div style={{margin:'14px 18px 0', background:'#fff', borderRadius:14, padding:'10px 12px', display:'flex', alignItems:'center', gap:10, boxShadow:'0 1px 0 rgba(0,0,0,.03)'}}>
        <div style={{width:8, height:8, background:'#8FE5A8', borderRadius:'50%'}}/>
        <span style={{fontSize:12, color:'#5B6270', flex:1}}>أنت تتحدّث مع المساعد الذكي. سيتدخّل موظّف دعم بشري إذا طلبت.</span>
        <span style={{fontSize:11, color:'#0E1116', fontWeight:700, textDecoration:'underline'}}>طلب موظّف</span>
      </div>

      {/* الرسائل */}
      <div style={{flex:1, padding:'16px 18px 0', display:'flex', flexDirection:'column', gap:10, overflow:'auto'}}>
        {/* رسالة من بوصلة (Welcome) */}
        <div style={{display:'flex', gap:8, alignItems:'flex-end'}}>
          <div style={{width:28, height:28, borderRadius:10, background:'#0E1116', color:'#8FE5A8', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:800, fontSize:11, flexShrink:0}}>ب</div>
          <div style={{maxWidth:'80%', background:'#fff', borderRadius:'18px 18px 18px 4px', padding:'10px 14px', boxShadow:'0 1px 0 rgba(0,0,0,.03)'}}>
            <div style={{fontSize:13, lineHeight:1.55}}>أهلاً ليلى 👋 أنا بوصلة، مساعدك الذكي في QTicket. كيف يمكنني خدمتك اليوم؟</div>
            <div style={{fontSize:10, color:'#8B919C', marginTop:4, textAlign:'start'}}>14:18</div>
          </div>
        </div>

        {/* اقتراحات */}
        <div style={{display:'flex', flexWrap:'wrap', gap:6, paddingInlineStart:36, marginTop:2}}>
          {['كيف ألغي تذكرة؟','تتبّع رحلتي القادمة','شحن المحفظة','الكوبونات المتاحة','مشكلة في الدفع'].map(q=>(
            <span key={q} style={{padding:'6px 11px', background:'#fff', borderRadius:999, fontSize:11, fontWeight:600, color:'#0E1116', boxShadow:'0 1px 0 rgba(0,0,0,.04)', border:'1px solid #E6E2D9'}}>{q}</span>
          ))}
        </div>

        {/* رسالة من العميل */}
        <div style={{display:'flex', gap:8, justifyContent:'flex-end', marginTop:8}}>
          <div style={{maxWidth:'80%', background:'#8FE5A8', color:'#0E1116', borderRadius:'18px 18px 4px 18px', padding:'10px 14px'}}>
            <div style={{fontSize:13, lineHeight:1.55}}>أريد إلغاء تذكرتي من دمشق لحلب يوم الأربعاء. الرحلة بعد ساعتين، شو الإجراء؟</div>
            <div style={{fontSize:10, color:'#0E1116', opacity:.55, marginTop:4, textAlign:'end'}}>14:19 · مقروء ✓✓</div>
          </div>
        </div>

        {/* رد بوصلة */}
        <div style={{display:'flex', gap:8, alignItems:'flex-end'}}>
          <div style={{width:28, height:28, borderRadius:10, background:'#0E1116', color:'#8FE5A8', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:800, fontSize:11, flexShrink:0}}>ب</div>
          <div style={{maxWidth:'80%', background:'#fff', borderRadius:'18px 18px 18px 4px', padding:'12px 14px', boxShadow:'0 1px 0 rgba(0,0,0,.03)'}}>
            <div style={{fontSize:13, lineHeight:1.6}}>
              وجدت تذكرتك. هذه التفاصيل:
            </div>
            {/* بطاقة معلومات داخل الرسالة */}
            <div style={{marginTop:10, background:'#F5F2EC', borderRadius:12, padding:'10px 12px'}}>
              <div style={{fontSize:11, color:'#8B919C'}}>QT-058321</div>
              <div style={{fontSize:13, fontWeight:700, marginTop:2, display:'inline-flex', alignItems:'center', gap:6}}>
                دمشق <Ico.arrowRight className="flip-rtl"/> حلب · <span className="mono ltr">06:45</span>
              </div>
              <div style={{fontSize:11, color:'#5B6270', marginTop:2}}>الأربعاء 20 تشرين · 2 مقاعد · 14,000 ل.س</div>
            </div>
            <div style={{fontSize:13, lineHeight:1.6, marginTop:10}}>
              بحسب سياسة الشركة، الإلغاء قبل أقلّ من 4 ساعات يخضع لرسوم 25%. سيُسترَدّ لك <span className="mono" style={{fontWeight:700}}>10,500 ل.س</span> إلى محفظتك خلال دقائق.
            </div>
            <div style={{fontSize:10, color:'#8B919C', marginTop:6}}>14:19</div>
            <div style={{marginTop:10, display:'flex', gap:6}}>
              <button style={{flex:1, height:36, background:'#0E1116', color:'#fff', borderRadius:10, border:'none', fontWeight:700, fontSize:12, fontFamily:'Rubik'}}>تأكيد الإلغاء</button>
              <button style={{flex:1, height:36, background:'#F5F2EC', color:'#0E1116', borderRadius:10, border:'none', fontWeight:600, fontSize:12, fontFamily:'Rubik'}}>أرى السياسة كاملة</button>
            </div>
          </div>
        </div>

        {/* رد العميل بسؤال آخر */}
        <div style={{display:'flex', gap:8, justifyContent:'flex-end', marginTop:8}}>
          <div style={{maxWidth:'80%', background:'#8FE5A8', color:'#0E1116', borderRadius:'18px 18px 4px 18px', padding:'10px 14px'}}>
            <div style={{fontSize:13, lineHeight:1.55}}>هل بالإمكان الحجز برحلة لاحقة بنفس السعر؟</div>
            <div style={{fontSize:10, color:'#0E1116', opacity:.55, marginTop:4, textAlign:'end'}}>14:21</div>
          </div>
        </div>

        {/* بوصلة تكتب… */}
        <div style={{display:'flex', gap:8, alignItems:'flex-end'}}>
          <div style={{width:28, height:28, borderRadius:10, background:'#0E1116', color:'#8FE5A8', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:800, fontSize:11, flexShrink:0}}>ب</div>
          <div style={{background:'#fff', borderRadius:'18px 18px 18px 4px', padding:'12px 16px', boxShadow:'0 1px 0 rgba(0,0,0,.03)', display:'flex', alignItems:'center', gap:4}}>
            {[0,1,2].map(i=>(
              <span key={i} style={{width:6, height:6, borderRadius:'50%', background:'#8B919C', opacity: i===0 ? .9 : i===1 ? .6 : .3}}/>
            ))}
          </div>
        </div>
      </div>

      {/* مدخل الرسالة */}
      <div style={{padding:'14px 18px 0', display:'flex', gap:10, alignItems:'center'}}>
        <div style={{width:44, height:44, borderRadius:'50%', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 1px 0 rgba(0,0,0,.03)', color:'#5B6270', fontSize:20}}>+</div>
        <div style={{flex:1, height:48, background:'#fff', borderRadius:999, padding:'0 18px', display:'flex', alignItems:'center', boxShadow:'0 1px 0 rgba(0,0,0,.03)'}}>
          <span style={{flex:1, fontSize:13, color:'#8B919C'}}>اكتب رسالتك…</span>
          <span style={{fontSize:18, color:'#8B919C'}}>🎤</span>
        </div>
        <div style={{width:48, height:48, borderRadius:'50%', background:'#8FE5A8', color:'#0E1116', display:'flex', alignItems:'center', justifyContent:'center'}}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="flip-rtl"><path d="m3 20 18-8L3 4l4 8z"/></svg>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SupportScreen });