Waseet

Overview

Waseet is a smart platform that connects citizens with relevant authorities to report issues related to housing and public services such as electricity, water, internet connectivity, road conditions, street lighting, and public facilities. The platform also supports reporting emergencies and natural disasters. Each report is automatically directed to the appropriate authority, allowing users to track the status of their reports and receive updates until the issue is resolved.

Personas

Personas

 Nasser Saad (51, Retired Military Officer)

Lives in Riyadh. Has limited digital experience and difficulty typing. Needs a fast reporting system with GPS detection and simple options for emergencies.
Problem Statement:
Nasser needs a simple GPS-based reporting system with minimal typing because complex forms and manual input increase stress during emergencies.
HMW:
• How might we reduce typing in emergency reporting?
• How might we use GPS for automatic location detection?
• How might we simplify issue selection?

Sara Abdullah (43, Housewife)

Lives in Riyadh. Prefers talking to real people and has low trust in automated systems due to past bad experiences.
Problem Statement:
Sara needs a trustworthy reporting platform with live human support because she does not trust automated systems and fears no response.
HMW:
• How might we provide live chat with real employees?
• How might we give clear confirmation after submitting reports?
• How might we make reporting more human and simple?

Ahmed Khan (38, Sales Supervisor)

Lives in Riyadh. Limited Arabic reading ability and prefers multilingual systems.
Problem Statement:
Ahmed needs a multilingual reporting system because language barriers make it hard for him to understand updates and submit reports.
HMW:
• How might we support multiple languages clearly?
• How might we simplify complaint routing automatically?
• How might we show clear status updates?

Fahad Al-Mutairi (48, Administrative Employee)

Lives in Al-Salam District, Al Kharj, Saudi Arabia Bachelor’s Degree in Human Resources Works full time in an office position at a dairy production company Comfortable using smartphones and mobile applications
Problem Statement:
Fahad Al-Mutairi, a full time administrative employee in Al Kharj, needs a highly efficient and
streamlined maintenance reporting platform that reduces the number of steps and eliminates
repeated data entry because slow and poorly optimized systems frustrate him and interfere with
his busy schedule.
HMW:
•How might we reduce the reporting process to the minimum number of steps without
sacrificing clarity?
•How might we provide clear progress indicators and estimated resolution times to enhance
the sense of efficiency?
•How might we optimize performance so the platform loads quickly and responds instantly?

Low-Fidelity

Low-Fidelity

Previous slide
Next slide
High Fidelity

High Fidelity

Previous slide
Next slide
code
 
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>وسيط - منصة البلاغات الموحدة</title>
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet" />
</head>
<body>

  <!-- ======================== SIGN IN SCREEN ======================== -->
  <div class="screen active" id="screen-signin">
    <div class="signin-header">
      <h1 class="app-logo">وسيط</h1>
      <p class="app-subtitle">منصة البلاغات الموحدة</p>
    </div>
    <div class="signin-card">
      <h2 class="signin-title">تسجيل الدخول</h2>
      <div class="form-group">
        <label>رقم الهوية</label>
        <input type="text" placeholder="أدخل رقم الهوية" class="input-field" />
      </div>
      <div class="form-group">
        <label>كلمة المرور</label>
        <input type="password" placeholder="أدخل كلمة المرور" class="input-field" />
        <a href="#" class="forgot-link">هل نسيت كلمة المرور؟</a>
      </div>
      <button class="btn-primary" onclick="navigate('screen-main')">تسجيل الدخول</button>
    </div>
    <p class="register-text">ليس لديك حساب؟ <a href="#" class="link-green">إنشاء حساب جديد</a></p>
    <button class="btn-nafaz">
      <span class="nafaz-logo">نفاذ</span>
      <span>تسجيل الدخول عن طريق نفاذ</span>
    </button>
    <button class="btn-language">
      <span class="globe-icon">🌐</span> Language
    </button>
  </div>

  <!-- ======================== MAIN SCREEN ======================== -->
  <div class="screen" id="screen-main">
    <div class="topbar green">
      <span class="back-btn" onclick="navigate('screen-signin')">›</span>
      <h2 class="topbar-title">وسيط</h2>
      <span class="notif-icon" onclick="navigate('screen-notifications')">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <span class="notif-badge">1</span>
      </span>
    </div>
    <div class="screen-content">
      <div class="welcome-card">
        <div>
          <h3 class="welcome-title">مرحبا,</h3>
          <p class="welcome-sub">كيف يمكننا مساعدتك اليوم؟</p>
        </div>
        <div class="avatar-placeholder">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="#aaa"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/></svg>
        </div>
      </div>

      <h3 class="section-title">الخدمات:</h3>

      <div class="service-card" onclick="navigate('screen-new-report')">
        <div class="service-info">
          <span class="service-name blue">الخدمات الأساسية</span>
          <span class="service-desc">المياه, الكهرباء, الانترنت ...</span>
        </div>
        <div class="service-icon blue-icon">
          <svg width="56" height="56" viewBox="0 0 80 60" fill="none">
            <rect x="10" y="30" width="60" height="28" rx="3" fill="#1a6fa8" opacity="0.15" stroke="#1a6fa8" stroke-width="2"/>
            <polygon points="5,32 40,8 75,32" fill="none" stroke="#1a6fa8" stroke-width="2.5"/>
            <rect x="30" y="40" width="20" height="18" rx="2" fill="#1a6fa8" opacity="0.3" stroke="#1a6fa8" stroke-width="1.5"/>
            <path d="M22 38 Q22 28 30 28" stroke="#f0a000" stroke-width="2.5" stroke-linecap="round" fill="none"/>
            <circle cx="22" cy="38" r="2" fill="#f0a000"/>
            <path d="M48 24 L52 20 M52 20 L56 24 M52 20 L52 28" stroke="#1a6fa8" stroke-width="2" stroke-linecap="round"/>
            <path d="M60 48 Q65 42 70 48" stroke="#1a6fa8" stroke-width="2" fill="none"/>
            <path d="M56 44 Q62 36 68 44" stroke="#1a6fa8" stroke-width="1.5" fill="none"/>
          </svg>
        </div>
      </div>

      <div class="service-card" onclick="navigate('screen-new-report')">
        <div class="service-info">
          <span class="service-name orange">الخدمات الرقابية</span>
          <span class="service-desc">الحدائق, الأحياء, الطرق ...</span>
        </div>
        <div class="service-icon orange-icon">
          <svg width="56" height="56" viewBox="0 0 80 60" fill="none">
            <rect x="5" y="20" width="70" height="35" rx="3" fill="#d4730a" opacity="0.1" stroke="#d4730a" stroke-width="1.5"/>
            <line x1="5" y1="40" x2="75" y2="40" stroke="#d4730a" stroke-width="2"/>
            <rect x="20" y="10" width="8" height="30" rx="1" fill="#d4730a" opacity="0.6"/>
            <rect x="36" y="18" width="8" height="22" rx="1" fill="#d4730a" opacity="0.6"/>
            <rect x="52" y="25" width="8" height="15" rx="1" fill="#d4730a" opacity="0.6"/>
            <line x1="5" y1="55" x2="75" y2="55" stroke="#d4730a" stroke-width="2.5"/>
            <circle cx="15" cy="55" r="4" fill="#d4730a" opacity="0.5"/>
            <circle cx="55" cy="55" r="4" fill="#d4730a" opacity="0.5"/>
          </svg>
        </div>
      </div>

      <div class="service-card" onclick="navigate('screen-new-report')">
        <div class="service-info">
          <span class="service-name red">خدمات الكوارث</span>
          <span class="service-desc">الزلزل, الفيضانات, الحرائق ...</span>
        </div>
        <div class="service-icon red-icon">
          <svg width="56" height="56" viewBox="0 0 80 60" fill="none">
            <path d="M40 5 C30 15 20 20 20 35 C20 48 29 58 40 58 C51 58 60 48 60 35 C60 20 50 15 40 5Z" fill="#c0392b" opacity="0.2" stroke="#c0392b" stroke-width="2"/>
            <path d="M40 18 C35 25 32 30 32 38 C32 44 35.6 48 40 48 C44.4 48 48 44 48 38 C48 30 45 25 40 18Z" fill="#c0392b" opacity="0.5"/>
            <path d="M37 32 L43 26 L40 34 L46 30 L39 42 L42 34Z" fill="white" opacity="0.8"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="bottom-nav">
      <div class="nav-item active" onclick="navigate('screen-main')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
        <span>الرئيسية</span>
      </div>
      <div class="nav-item" onclick="navigate('screen-reports')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        <span>بلاغاتي</span>
      </div>
      <div class="nav-item" onclick="navigate('screen-support')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
        <span>الدعم الفني</span>
      </div>
      <div class="nav-item" onclick="navigate('screen-settings')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
        <span>الاعدادات</span>
      </div>
    </div>
  </div>

  <!-- ======================== NEW REPORT SCREEN ======================== -->
  <div class="screen" id="screen-new-report">
    <div class="topbar green">
      <span class="back-btn" onclick="navigate('screen-main')">›</span>
      <h2 class="topbar-title">بلاغ جديد</h2>
      <span></span>
    </div>
    <div class="screen-content">
      <div class="form-section">
        <label class="section-label">نوع البلاغ</label>
        <div class="select-wrapper">
          <select class="input-field select-input">
            <option value="" disabled selected>اختر نوع البلاغ</option>
            <option>الخدمات الأساسية</option>
            <option>الخدمات الرقابية</option>
            <option>خدمات الكوارث</option>
          </select>
          <span class="select-arrow">▾</span>
        </div>
      </div>

      <div class="form-section">
        <label class="section-label">تفاصيل البلاغ</label>
        <textarea class="input-field textarea-field" placeholder="اكتب تفاصيل البلاغ..."></textarea>
      </div>

      <div class="form-section">
        <label class="section-label">إرفاق الصور</label>
        <div class="photo-grid">
          <div class="photo-slot">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#bbb" stroke-width="1.5"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>
          </div>
          <div class="photo-slot">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#bbb" stroke-width="1.5"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>
          </div>
          <div class="photo-slot">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#bbb" stroke-width="1.5"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>
          </div>
          <div class="photo-slot">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#bbb" stroke-width="1.5"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>
          </div>
        </div>
      </div>

      <div class="form-section">
        <label class="section-label">تحديد الموقع</label>
        <div class="location-bar">
          <span class="location-pin-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1b6e3e" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
          </span>
          <div class="location-text">
            <span class="location-title">تحديد موقعي الحالي</span>
            <span class="location-sub">سيتم استخدام الموقع الظاهر على الخريطة</span>
          </div>
          <span class="location-target">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1b6e3e" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>
          </span>
        </div>
      </div>
    </div>
    <div class="screen-footer">
      <button class="btn-primary" onclick="showSuccess()">إرسال البلاغ</button>
    </div>

    <!-- Success overlay -->
    <div class="success-overlay" id="success-overlay">
      <div class="success-modal">
        <div class="success-check">
          <svg width="52" height="52" viewBox="0 0 24 24" fill="white"><path d="M20 6L9 17l-5-5"/></svg>
        </div>
        <p class="success-text">تم ارسال بلاغك بنجاح</p>
        <button class="btn-outline-green" onclick="navigate('screen-reports')">بلاغاتي</button>
      </div>
    </div>
  </div>

  <!-- ======================== MY REPORTS SCREEN ======================== -->
  <div class="screen" id="screen-reports">
    <div class="topbar green">
      <span class="back-btn" onclick="navigate('screen-main')">›</span>
      <h2 class="topbar-title">بلاغاتي</h2>
      <span class="notif-icon" onclick="navigate('screen-notifications')">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <span class="notif-badge">1</span>
      </span>
    </div>
    <div class="screen-content">
      <div class="report-card">
        <div class="report-right">
          <span class="report-title">الكهرباء - انقطاع التيار</span>
          <span class="report-id">#245352352</span>
          <span class="report-date">20 أبريل 2026</span>
        </div>
        <div class="report-left">
          <span class="status-badge pending">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            قيد المعالجة
          </span>
        </div>
      </div>

      <div class="report-card">
        <div class="report-right">
          <span class="report-title">المياه - تسرب مياه</span>
          <span class="report-id">#242753352</span>
          <span class="report-date">12 مارس 2025</span>
        </div>
        <div class="report-left">
          <span class="status-badge resolved">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/></svg>
            تم الحل
          </span>
        </div>
      </div>

      <div class="report-card">
        <div class="report-right">
          <span class="report-title">الطرق - حفر في الطريق</span>
          <span class="report-id">#245732352</span>
          <span class="report-date">5 ديسمبر 2023</span>
        </div>
        <div class="report-left">
          <span class="status-badge rejected">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
            مرفوض
          </span>
        </div>
      </div>
    </div>
    <div class="bottom-nav">
      <div class="nav-item" onclick="navigate('screen-main')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
        <span>الرئيسية</span>
      </div>
      <div class="nav-item active" onclick="navigate('screen-reports')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        <span>بلاغاتي</span>
      </div>
      <div class="nav-item" onclick="navigate('screen-support')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
        <span>الدعم الفني</span>
      </div>
      <div class="nav-item" onclick="navigate('screen-settings')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
        <span>الاعدادات</span>
      </div>
    </div>
  </div>

  <!-- ======================== NOTIFICATIONS SCREEN ======================== -->
  <div class="screen" id="screen-notifications">
    <div class="topbar green">
      <span class="back-btn" onclick="history.back(); navigate('screen-main')">›</span>
      <h2 class="topbar-title">الأشعارات</h2>
      <span></span>
    </div>
    <div class="screen-content">
      <div class="notif-card">
        <span class="notif-dot red-dot"></span>
        <div class="notif-body">
          <span class="notif-title">بلاغك قيد المعالجة</span>
          <span class="notif-desc">جاري العمل على حل البلاغ #245352352 الخاص بانقطاع الكهرباء</span>
          <span class="notif-time">منذ 3 ساعات</span>
        </div>
        <span class="notif-type-icon clock">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#d4a00a" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
        </span>
      </div>

      <div class="notif-card">
        <span class="notif-dot red-dot"></span>
        <div class="notif-body">
          <span class="notif-title">يوجد صيانة دورية</span>
          <span class="notif-desc">سيتم إجراء صيانة على النظام يوم الاثنين من 2 ص إلى 5 ص</span>
          <span class="notif-time">منذ يوم</span>
        </div>
        <span class="notif-type-icon warning">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#e05c00" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
        </span>
      </div>

      <div class="notif-card">
        <span class="notif-dot invisible"></span>
        <div class="notif-body">
          <span class="notif-title">تم حل بلاغك</span>
          <span class="notif-desc">تم حل بلاغ #242753352 الخاص بتسرب المياه</span>
          <span class="notif-time">منذ سنة</span>
        </div>
        <span class="notif-type-icon check">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1b6e3e" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/></svg>
        </span>
      </div>

      <div class="notif-card">
        <span class="notif-dot invisible"></span>
        <div class="notif-body">
          <span class="notif-title">مرفوض</span>
          <span class="notif-desc">تم رفض بلاغك #245732352 الخاص بحفر في الطريق</span>
          <span class="notif-time">منذ 3 سنوات</span>
        </div>
        <span class="notif-type-icon cross">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#c0392b" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
        </span>
      </div>
    </div>
  </div>

  <!-- ======================== SUPPORT SCREEN ======================== -->
  <div class="screen" id="screen-support">
    <div class="topbar green">
      <span class="back-btn" onclick="navigate('screen-main')">›</span>
      <h2 class="topbar-title">الدعم الفني</h2>
      <span></span>
    </div>
    <div class="chat-content">
      <div class="chat-date">
        <span>تاريخ انشاء المحادثة</span>
        <span>22/4/2026</span>
        <span>12:22</span>
      </div>
      <div class="chat-messages">
        <div class="msg-row user-row">
          <div class="user-avatar">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="#aaa"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/></svg>
          </div>
          <div class="msg-bubble user-bubble">السلام عليكم عندي سؤال</div>
        </div>
        <div class="msg-row support-row">
          <div class="msg-bubble support-bubble">
            <span class="support-name">دعم وسيط</span>
            عليكم السلام حياك الله اخ **** تفضل كيف اقدر اساعدك ؟
          </div>
          <div class="support-avatar">
            <div class="waseet-logo-chat">وسيط<br/><small>WASEET</small></div>
          </div>
        </div>
      </div>
    </div>
    <div class="chat-input-bar">
      <button class="send-btn">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1b6e3e" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
      </button>
      <input type="text" placeholder="اكتب رسالتك" class="chat-input" />
    </div>
    <div class="bottom-nav">
      <div class="nav-item" onclick="navigate('screen-main')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
        <span>الرئيسية</span>
      </div>
      <div class="nav-item" onclick="navigate('screen-reports')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        <span>بلاغاتي</span>
      </div>
      <div class="nav-item active" onclick="navigate('screen-support')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
        <span>الدعم الفني</span>
      </div>
      <div class="nav-item" onclick="navigate('screen-settings')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
        <span>الاعدادات</span>
      </div>
    </div>
  </div>

  <!-- ======================== SETTINGS SCREEN ======================== -->
  <div class="screen" id="screen-settings">
    <div class="topbar green">
      <h2 class="topbar-title" style="margin:0 auto">الاعدادات</h2>
    </div>
    <div class="screen-content">
      <div class="settings-item">
        <div class="settings-right">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><path d="M3 5h11M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
          <span class="settings-label">اللغة</span>
        </div>
        <div class="settings-left">
          <span class="settings-value">العربية</span>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        </div>
      </div>
      <div class="settings-divider"></div>

      <div class="settings-item">
        <div class="settings-right">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
          <span class="settings-label">الاشعارات</span>
        </div>
        <div class="settings-left">
          <div class="toggle-switch" onclick="this.classList.toggle('on')">
            <div class="toggle-thumb"></div>
          </div>
        </div>
      </div>
      <div class="settings-divider"></div>

      <div class="settings-section-title">حول التطبيق</div>

      <div class="settings-item">
        <div class="settings-right">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
          <span class="settings-label">سياسة الخصوصية</span>
        </div>
        <div class="settings-left">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        </div>
      </div>
      <div class="settings-divider"></div>

      <div class="settings-item">
        <div class="settings-right">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
          <span class="settings-label">الأسئلة الشائعة</span>
        </div>
        <div class="settings-left">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        </div>
      </div>
      <div class="settings-divider"></div>

      <div class="settings-version">v1.1.0</div>
    </div>
    <div class="bottom-nav">
      <div class="nav-item" onclick="navigate('screen-main')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
        <span>الرئيسية</span>
      </div>
      <div class="nav-item" onclick="navigate('screen-reports')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        <span>بلاغاتي</span>
      </div>
      <div class="nav-item" onclick="navigate('screen-support')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
        <span>الدعم الفني</span>
      </div>
      <div class="nav-item active" onclick="navigate('screen-settings')">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
        <span>الاعدادات</span>
      </div>
    </div>
  </div>

  <script src="app.js"></script>
</body>
</html>

/* ===================== CSS VARIABLES ===================== */
:root {
  --green: #1b6e3e;
  --green-dark: #155530;
  --green-light: #e8f4ee;
  --green-mid: #2a8a50;
  --white: #ffffff;
  --bg: #f7f7f7;
  --card-bg: #ffffff;
  --border: #e8e8e8;
  --text-dark: #1a1a1a;
  --text-mid: #555;
  --text-light: #999;
  --red: #c0392b;
  --orange: #d4730a;
  --blue: #1a6fa8;
  --yellow: #d4a00a;
  --pending-bg: #fff8e1;
  --pending-color: #b8860b;
  --resolved-bg: #e8f5e9;
  --resolved-color: #2e7d32;
  --rejected-bg: #fdecea;
  --rejected-color: #c62828;
  --shadow: 0 2px 12px rgba(0,0,0,0.07);
  --radius: 12px;
  --radius-sm: 8px;
  --font: 'Tajawal', sans-serif;
}

/* ===================== RESET & BASE ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  font-family: var(--font);
  background: #d0d0d0;
  direction: rtl;
  overflow: hidden;
}

/* ===================== PHONE WRAPPER ===================== */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Each .screen is the "phone" */
.screen {
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  max-height: 900px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.screen.active { display: flex; }

/* ===================== TOPBAR ===================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 18px;
  flex-shrink: 0;
}
.topbar.green {
  background: var(--green);
  color: white;
  border-radius: 0 0 22px 22px;
}
.topbar-title {
  font-size: 20px;
  font-weight: 700;
  color: white;
}
.back-btn {
  font-size: 28px;
  color: white;
  cursor: pointer;
  line-height: 1;
  transform: rotate(180deg);
  display: inline-block;
  opacity: 0.85;
  transition: opacity 0.2s;
  user-select: none;
}
.back-btn:hover { opacity: 1; }
.notif-icon {
  position: relative;
  color: white;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-badge {
  position: absolute;
  top: -2px;
  left: -2px;
  background: #e53935;
  color: white;
  font-size: 9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ===================== SCREEN CONTENT ===================== */
.screen-content {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  -webkit-overflow-scrolling: touch;
}
.screen-content::-webkit-scrollbar { width: 0; }

/* ===================== BOTTOM NAV ===================== */
.bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: white;
  border-top: 1px solid var(--border);
  padding: 10px 0 14px;
  flex-shrink: 0;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #999;
  font-size: 11px;
  cursor: pointer;
  transition: color 0.2s;
  padding: 4px 10px;
}
.nav-item:hover { color: var(--green); }
.nav-item.active { color: var(--green); }

/* ===================== BUTTONS ===================== */
.btn-primary {
  width: 100%;
  padding: 15px;
  background: var(--green);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  letter-spacing: 0.3px;
}
.btn-primary:hover { background: var(--green-dark); }
.btn-primary:active { transform: scale(0.98); }

.btn-outline-green {
  padding: 10px 28px;
  background: var(--green);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-outline-green:hover { background: var(--green-dark); }

/* ===================== INPUT FIELDS ===================== */
.input-field {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-dark);
  background: white;
  outline: none;
  transition: border-color 0.2s;
  direction: rtl;
}
.input-field:focus { border-color: var(--green); }
.input-field::placeholder { color: #bbb; }

/* ===================== SIGN IN SCREEN ===================== */
#screen-signin {
  background: white;
  justify-content: flex-start;
  padding-bottom: 20px;
}
.signin-header {
  background: var(--green);
  padding: 50px 20px 36px;
  text-align: center;
  border-radius: 0 0 24px 24px;
  margin-bottom: 24px;
}
.app-logo {
  font-size: 32px;
  font-weight: 800;
  color: white;
  letter-spacing: 1px;
}
.app-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.82);
  margin-top: 6px;
}
.signin-card {
  background: white;
  margin: 0 20px;
  border-radius: var(--radius);
  padding: 28px 22px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.signin-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 22px;
}
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
  margin-bottom: 7px;
  text-align: right;
}
.forgot-link {
  display: block;
  text-align: left;
  font-size: 12px;
  color: var(--green);
  text-decoration: none;
  margin-top: 6px;
}
.register-text {
  text-align: center;
  font-size: 13px;
  color: var(--text-mid);
  margin: 18px 20px 0;
}
.link-green {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.btn-nafaz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--green-mid);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 15px 20px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  margin: 16px 20px 0;
  cursor: pointer;
  width: calc(100% - 40px);
  transition: background 0.2s;
}
.btn-nafaz:hover { background: var(--green); }
.nafaz-logo {
  font-size: 18px;
  font-weight: 800;
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 6px;
}
.btn-language {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-dark);
  margin: 16px auto 0;
  cursor: pointer;
  transition: border-color 0.2s;
}
.btn-language:hover { border-color: var(--green); }
.globe-icon { font-size: 18px; }

/* ===================== MAIN SCREEN ===================== */
.welcome-card {
  background: white;
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.welcome-title { font-size: 18px; font-weight: 700; color: var(--text-dark); }
.welcome-sub { font-size: 13px; color: var(--text-light); margin-top: 3px; }
.avatar-placeholder {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border);
}
.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
  text-align: right;
}
.service-card {
  background: white;
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
  border: 1px solid var(--border);
}
.service-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
  transform: translateY(-1px);
}
.service-info { display: flex; flex-direction: column; gap: 5px; }
.service-name { font-size: 15px; font-weight: 700; }
.service-name.blue { color: var(--blue); }
.service-name.orange { color: var(--orange); }
.service-name.red { color: var(--red); }
.service-desc { font-size: 12px; color: var(--text-light); }
.service-icon {
  width: 70px; height: 56px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.blue-icon { background: rgba(26,111,168,0.08); }
.orange-icon { background: rgba(212,115,10,0.08); }
.red-icon { background: rgba(192,57,43,0.08); }

/* ===================== NEW REPORT SCREEN ===================== */
.form-section { margin-bottom: 20px; }
.section-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
  text-align: right;
}
.select-wrapper { position: relative; }
.select-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 14px;
  padding-left: 36px;
  cursor: pointer;
}
.select-arrow {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #aaa;
  pointer-events: none;
}
.textarea-field {
  resize: none;
  height: 110px;
  padding-top: 12px;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.photo-slot {
  aspect-ratio: 1;
  border: 2px dashed #ddd;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s;
  background: #fafafa;
}
.photo-slot:hover { border-color: var(--green); }
.location-bar {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.location-bar:hover { border-color: var(--green); }
.location-text { flex: 1; }
.location-title { display: block; font-size: 14px; font-weight: 600; color: var(--text-dark); }
.location-sub { display: block; font-size: 11px; color: var(--text-light); margin-top: 2px; }
.screen-footer {
  padding: 12px 16px 16px;
  flex-shrink: 0;
  background: var(--bg);
}

/* ===================== SUCCESS OVERLAY ===================== */
.success-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 100;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  animation: fadeIn 0.25s ease;
}
.success-overlay.show { display: flex; }
.success-modal {
  background: #eef5ef;
  border-radius: 18px;
  padding: 36px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 82%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  animation: slideUp 0.3s ease;
}
.success-check {
  width: 80px; height: 80px;
  background: linear-gradient(145deg, #3cb060, #1e8a42);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(30,138,66,0.35);
}
.success-check svg { width: 44px; height: 44px; stroke: white; stroke-width: 3; fill: none; }
.success-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ===================== MY REPORTS ===================== */
.report-card {
  background: white;
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.report-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.report-right { display: flex; flex-direction: column; gap: 4px; }
.report-title { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.report-id { font-size: 12px; color: var(--text-light); }
.report-date { font-size: 11px; color: #bbb; }
.report-left { display: flex; align-items: center; }
.status-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.status-badge.pending { background: var(--pending-bg); color: var(--pending-color); }
.status-badge.resolved { background: var(--resolved-bg); color: var(--resolved-color); }
.status-badge.rejected { background: var(--rejected-bg); color: var(--rejected-color); }

/* ===================== NOTIFICATIONS ===================== */
.notif-card {
  background: white;
  border-radius: var(--radius);
  padding: 14px 14px 14px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  border: 1px solid var(--border);
}
.notif-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.red-dot { background: #e53935; }
.invisible { background: transparent; }
.notif-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.notif-title { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.notif-desc { font-size: 12px; color: var(--text-mid); line-height: 1.5; }
.notif-time { font-size: 11px; color: #bbb; }
.notif-type-icon { flex-shrink: 0; margin-top: 2px; }

/* ===================== SUPPORT / CHAT ===================== */
#screen-support { display: none; flex-direction: column; }
#screen-support.active { display: flex; }
.chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.chat-content::-webkit-scrollbar { width: 0; }
.chat-date {
  text-align: center;
  color: var(--text-light);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 24px;
}
.chat-messages { display: flex; flex-direction: column; gap: 16px; }
.msg-row { display: flex; align-items: flex-end; gap: 10px; }
.user-row { flex-direction: row; }
.support-row { flex-direction: row-reverse; }
.user-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.msg-bubble {
  max-width: 72%;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dark);
}
.user-bubble {
  background: #e8e8e8;
  border-bottom-right-radius: 4px;
}
.support-bubble {
  background: #d6e4db;
  border-bottom-left-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
}
.support-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--green);
}
.support-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
}
.waseet-logo-chat {
  width: 44px; height: 44px;
  background: var(--green);
  border-radius: 50%;
  color: white;
  font-size: 9px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  line-height: 1.2;
}
.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f0f0f0;
  border-radius: 30px;
  margin: 0 12px 10px;
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-dark);
  outline: none;
  direction: rtl;
}
.chat-input::placeholder { color: #bbb; }
.send-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
  transition: opacity 0.2s;
}
.send-btn:hover { opacity: 0.7; }

/* ===================== SETTINGS ===================== */
.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 8px;
}
.settings-item:hover { background: #f5f5f5; }
.settings-right { display: flex; align-items: center; gap: 10px; }
.settings-label { font-size: 15px; font-weight: 500; color: var(--text-dark); }
.settings-left { display: flex; align-items: center; gap: 8px; }
.settings-value { font-size: 13px; color: var(--text-mid); }
.settings-divider { height: 1px; background: var(--border); margin: 2px 0; }
.settings-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 14px 0 8px;
}
.settings-version {
  text-align: center;
  font-size: 13px;
  color: var(--text-light);
  margin-top: 32px;
  font-weight: 500;
}

/* ===================== TOGGLE SWITCH ===================== */
.toggle-switch {
  width: 44px; height: 26px;
  background: #ccc;
  border-radius: 13px;
  cursor: pointer;
  position: relative;
  transition: background 0.25s;
  flex-shrink: 0;
}
.toggle-switch.on { background: var(--green); }
.toggle-thumb {
  position: absolute;
  top: 3px; right: 3px;
  width: 20px; height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: right 0.25s;
}
.toggle-switch.on .toggle-thumb { right: calc(100% - 23px); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 480px) {
  body { background: white; }
  .screen {
    max-width: 100%;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (min-width: 481px) {
  body {
    background: #c8c8c8;
    background-image: linear-gradient(135deg, #b8b8b8, #d8d8d8);
  }
}
Previous slide
Next slide
go to top