<?php
if(!defined('BOOM')){
	die();
}
$room = roomDetails($data['user_roomid']);
if(usePlayer()){
	$player = playerDetails($room['room_player_id']);
}
setUserRoom();
?>

<?php
// if ( (boomAllow(100) || boomAllow($data['can_overlay'])) && !empty($data['overlay_sound']) ) {
?>
<div class="loading-overlay">
    <img alt="Loading...">
    <audio></audio>
<script>
let overlaySound = document.querySelector(".loading-overlay audio");

$(".loading-overlay").click(function () {$(".loading-overlay audio")[0].pause();$(this).hide(250);});
overlaySound.addEventListener("ended", () => {$(".loading-overlay").hide(250);});

const overlayOpen = function (i, s) {
    if (i != "null" && s != "null" && i !== "" && s !== "") {
        document.querySelector(".loading-overlay img").src = "upload/overlay/"+i;
        overlaySound.src = "upload/overlay/"+s;
		overlaySound.currentTime = 0;
        setTimeout(() => {
            overlaySound.play();
            $(".loading-overlay").show(250);
            $(".loading-overlay").css("display", "flex");
        }, 500);
    }
}
</script>
<style>
.loading-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999;
    background-color: transparent;
    display: none;
    justify-content: center;
    align-items: center;
}
.loading-overlay img {
    width: 400px;
    max-width: 100%;
}
</style>
</div>
<?php
// }
?>

<div id="global_chat" class="backglob chatheight" >
	
	<div id="chat_left" class="left_hide back_panel rborder bshadow pheight">
		<div id="left_content">
			<div id="left_panel_bar" class="btable bborder panel_bar">
				<div id="leftpanel_head" class="left_head_empty bcell_mid">
				</div>
				<div class="left_bar_item" onclick="resetLeftPanel();">
					<i class="fa fa-times"></i>
				</div>
			</div>
			<div id="chat_left_data" class="clheight">
			</div>
		</div>
	</div>
	
	<div id="chat_center" class="chatheight" style="position:relative;">
		<div  id="container_chat">
			<div id="wrap_chat">
				<div id="chat_toping" class="chat_topping">
					<!--
					you can add content to the top of chat by editing file located in
					chat_element / top.php
					-->
					<?php echo boomTemplate('../control/element/top'); ?>
				</div>
				<div id="warp_show_chat">
					<div id="container_show_chat">
						<div id="inside_wrap_chat">
												    <div class="menutrig" onclick="editProfile();" id="main_mob_menu" style="z-index: 1;">

                            <img src="default_images/k2-profff.png" style=" margin-left: 10px; margin-top: 6px;">

                        </div>

						    <!---->
						     <div value="0" onclick="getPrivate();" id="get_private" class="privelem head_option menutrig fhide"  style="z-index: 1;">
		<div class="btable notif_zone">
		    
			<div class="bcell_mid">
			<img src="default_images/k2-prrr.png" style="  margin-right: -30px; margin-top: 6px;">
			</div>
		</div>
		<div id="notify_private" class="head_notify bnotify"></div>
	</div>
	<!---->
 	<?php if(boomAllow(1)){ ?>
	<div onclick="friendRequest();" class="head_option menutrig"style="  position: absolute; top: 60px;  left:70px; border: 3px solid #transparent; z-index: 1;">
		<div class="btable notif_zone">
			<div class="bcell_mid">
				<i class="fa fa-user-plus"></i>
			</div>
		</div>
		<div id="notify_friends" class="head_notify bnotify"></div>
	</div>
	<?php } ?>
	<!---->
	<!----> 
	
	<div class="head_option show_menu menutrig" style="  position: absolute;   left:15px; border: 3px solid #transparent; z-index: 1;" data-menu="chat_left_menu">
		<div class="btable notif_zone">
			<div class="bcell_mid">
				<i class="fa-solid fa-list i_btm"></i>
			</div>
		</div>
		<div id="bottom_news_notify" class="head_notify bnotify"></div>
	</div>
	<!--<!-end-->
	<!---->
	<div data-menu="chat_main_menu" id="main_mob_menu" class="show_menu menutrig"  style="top: 30px;  left:14px ; z-index: 1;">
		<img class="avatar_menu glob_av" src="<?php echo myAvatar($data['user_tumb']); ?> " style=" width: 30px; height: 30px;"/>
		<img class="top_status status_icon" src="default_images/status/<?php echo statusIcon($data['user_status']); ?>"/>
	</div>
	<div onclick="getNotification();" class="head_option menutrig"style="  position: absolute; top: 95px;  left:68px; border: 3px solid #transparent; z-index: 1;">
		<div class="btable notif_zone">
			<div class="bcell_mid">
				<i class="fa fa-bell"></i>
			</div>
		</div>
		<div id="notify_notify" class="head_notify bnotify"></div>
	</div>
	
	<!--ayoub edit-->
<!--pro-->
	<div onclick="getLeaderboard();" class="head_option menutrig" style="  position: absolute; top: 130px;  left:14px; z-index: 1;">
		<img src="default_images/icons/xpLogo.webp" alt="أعلى XP" style=" width: 30px; height: 30px;background:white;border-radius: 25px;">
	</div>

	<!---->
	<div onclick="getLeaderOfXc('leader_level');" class="head_option menutrig" style="  position: absolute; top: 171px;  left:14px; z-index: 1;">
		<img src="default_images/icons/level-up.png" alt="أعلى المستويات" style=" width: 30px; height: 30px;background:white;border-radius: 25px;">
	</div>

	<div onclick="getLeaderOfXc('leader_gift');" class="head_option menutrig" style="  position: absolute; top: 212px;  left:14px; z-index: 1;">
		<img src="default_images/icons/gift.gif" alt="أعلى الهدايا" style=" width: 30px; height: 30px;border-radius: 25px;">
	</div>


	<!---->
	<div onclick="getLeaderOfXc('leader_like');" class="head_option menutrig" style="  position: absolute; top: 253px;  left:14px; z-index: 1;">
		<img src="default_images/icons/like.png" alt="أعلى الإعجابات" style=" width: 30px; height: 30px;background:white;border-radius: 25px;">
	</div>
<div style="    text-align: center;
    font-size: 25px;
    color: green; position: absolute;top: 360px;left:14px;z-index: 1;color: #ffffff; background-color: #28a745; border-radius: 50%; padding: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 15px;" class="head_option menutrig" onclick="toggleRight();">
    
                            <i class="fas fa-users"></i>
                            
                        </div>
                        <div class="sub_options" style="position: absolute; top: 400px; left: 9px; z-index: 1; cursor: pointer; width: 32px; height: 32px; background-color: #ff4444; border-radius: 50%; display: flex; justify-content: center; align-items: center;" onclick="location.reload();">
    <svg width="20" height="20" viewBox="0 0 24 24" style="display: block;">
        <path fill="white" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
    </svg>
</div>
                        <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>تنبيهات أذكار — تصميم وتطوير: أيمن محمود</title>

  <!-- Font Awesome (icons) -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;700&display=swap" rel="stylesheet">

  <style>
    :root{
      --gold: #d4af37;
      --glass-bg: rgba(255,255,255,0.15);
      --glass-border: rgba(255,255,255,0.25);
      --accent-dark: #0f1724;
      --primary-gradient: linear-gradient(135deg, #0a4d68 0%, #05bfdb 50%, #00ff88 100%);
    }
    
    *{
      box-sizing:border-box;
      margin:0;
      padding:0;
    }
    
    body{
      margin:0;
      min-height:100vh;
      font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
      background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
      color:#111;
      position: relative;
      overflow-x: hidden;
    }

    /* خلفية زخرفية */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
        radial-gradient(circle, rgba(212, 175, 55, 0.05) 1px, transparent 1px),
        radial-gradient(circle, rgba(5, 191, 219, 0.05) 1px, transparent 1px);
      background-size: 30px 30px, 50px 50px;
      z-index: -1;
    }

    /* أيقونة في منتصف الصفحة بالأعلى */
    .notif-icon {
      position: fixed;
      top: 20px;
      left: 90%;
      transform: translateX(-50%);
      width:50px;
      height:50px;
      border-radius:12px;
      background: var(--primary-gradient);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:22px;
      cursor:pointer;
      box-shadow: 0 8px 24px rgba(5, 191, 219, 0.3);
      z-index:2001;
      transition: all .3s ease;
      animation: pulse 2s infinite;
      
    }
    
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(5, 191, 219, 0.4); }
      70% { box-shadow: 0 0 0 10px rgba(5, 191, 219, 0); }
      100% { box-shadow: 0 0 0 0 rgba(5, 191, 219, 0); }
    }
    
    .notif-icon:hover{ 
      transform: translateX(-50%) scale(1.05); 
      box-shadow: 0 10px 28px rgba(5, 191, 219, 0.4);
    }

    /* مربع الشرح */
    .info-box {
      position: fixed;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: 320px;
      max-width: calc(100% - 40px);
      padding: 20px;
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
      border-radius: 16px;
      border: 1px solid var(--glass-border);
      box-shadow: 0 15px 35px rgba(15,23,36,0.25);
      z-index: 2002;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .info-box.active {
      opacity: 1;
      visibility: visible;
    }
    
    .info-box::before {
      content: '';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 0 10px 10px;
      border-style: solid;
      border-color: transparent transparent rgba(255,255,255,0.95);
    }
    
    .info-box h3 {
      color: var(--accent-dark);
      font-size: 18px;
      margin-bottom: 12px;
      text-align: center;
      font-weight: 700;
    }
    
    .info-box p {
      color: #444;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 15px;
      text-align: center;
    }
    
    .info-box .features {
      list-style: none;
      margin-bottom: 15px;
    }
    
    .info-box .features li {
      display: flex;
      align-items: flex-start;
      margin-bottom: 8px;
      font-size: 14px;
      color: #555;
    }
    
    .info-box .features li i {
      color: var(--gold);
      margin-left: 8px;
      margin-top: 3px;
      flex-shrink: 0;
    }
    
    .info-box .social-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 15px;
    }
    
    .info-box .social-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
      font-size: 18px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      transition: all .2s ease;
    }
    
    .info-box .social-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    }
    
    .info-box .social-btn.telegram {
      background: linear-gradient(180deg, #33a0df, #0e79b2);
    }
    
    .info-box .social-btn.whatsapp {
      background: linear-gradient(180deg, #2ecc71, #22b35b);
    }
    
    .info-box .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .info-box .close-btn:hover {
      background: rgba(0,0,0,0.2);
      color: #333;
    }
    
    .info-box .view-adhkar-btn {
      display: block;
      width: 100%;
      padding: 10px;
      margin-top: 15px;
      background: var(--primary-gradient);
      color: white;
      text-align: center;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.2s ease;
    }
    
    .info-box .view-adhkar-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 12px rgba(5, 191, 219, 0.3);
    }

    /* overlay */
    .overlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,0.6);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:2000;
      backdrop-filter: blur(8px) saturate(120%);
      transition: opacity .35s ease;
      opacity:0;
    }
    
    .overlay.active{ 
      display:flex; 
      opacity:1; 
    }

    /* البطاقة المنبثقة (كارت) */
    .card{
      width: 500px;
      max-width: calc(100% - 40px);
      border-radius: 20px;
      padding: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
      border: 1px solid var(--glass-border);
      box-shadow: 0 15px 35px rgba(15,23,36,0.3);
      transform: scale(0.8);
      opacity:0;
      transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
      position: relative;
      overflow: hidden;
    }
    
    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: var(--primary-gradient);
    }
    
    .card.active{ 
      transform: scale(1); 
      opacity:1; 
    }

    .card-header{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:14px;
      margin-bottom:16px;
      text-align: center;
    }

    .dev-line{
      font-weight:700;
      font-size:22px;
      line-height:1.2;
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }

    .social-row{
      display:flex;
      gap:16px;
      align-items:center;
      justify-content:center;
    }
    
    .social-btn{
      width:50px;height:50px;border-radius:50%;
      display:inline-flex;align-items:center;justify-content:center;
      color:#fff;text-decoration:none;font-size:20px;
      box-shadow: 0 6px 16px rgba(0,0,0,0.15);
      transition: all .2s ease;
    }
    
    .social-btn:hover{ 
      transform: translateY(-4px); 
      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    .social-btn.whatsapp{ 
      background: linear-gradient(180deg,#2ecc71,#22b35b); 
    }
    
    .social-btn.telegram{ 
      background: linear-gradient(180deg,#33a0df,#0e79b2); 
    }

    .divider{ 
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent); 
      margin:16px 0;
      border-radius:2px; 
    }

    .category-tabs {
      display: flex;
      justify-content: center;
      margin-bottom: 16px;
      gap: 8px;
      flex-wrap: wrap;
    }

    .category-tab {
      padding: 8px 14px;
      border-radius: 20px;
      background: rgba(10, 77, 104, 0.1);
      border: 1px solid rgba(10, 77, 104, 0.2);
      color: var(--accent-dark);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .category-tab.active {
      background: var(--primary-gradient);
      color: white;
      border-color: transparent;
    }

    .category-tab:hover {
      background: rgba(10, 77, 104, 0.2);
    }

    .category-tab.active:hover {
      background: var(--primary-gradient);
    }

    .posts{
      display:flex;flex-direction:column;gap:14px;
      max-height:50vh; overflow:auto; padding-right:8px;
    }

    .post{
      display:flex;gap:12px;align-items:flex-start;
      background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5));
      border-radius:12px;padding:14px;border:1px solid rgba(255,255,255,0.3);
      transition: all .2s ease;
    }
    
    .post:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    }
    
    .post .quran{
      width:50px;height:50px;border-radius:12px;flex-shrink:0;
      background: linear-gradient(180deg,#fff,#f3f3f3);
      display:flex;align-items:center;justify-content:center;overflow:hidden;
      box-shadow: 0 6px 14px rgba(0,0,0,0.1);
    }
    
    .post .quran img{ 
      width:80%; 
      height:80%; 
      object-fit:contain; 
    }

    .post .body{
      font-size:16px;
      color:#0e1720; 
      line-height:1.8;
      font-weight: 500;
      width: 100%;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    .post .category {
      font-size: 12px;
      color: var(--gold);
      margin-top: 6px;
      font-weight: 600;
    }

    /* زر إغلاق الإشعارات */
    .notification-control {
      display: flex;
      justify-content: center;
      margin-top: 16px;
    }
    
    .toggle-notifications-btn {
      padding: 8px 16px;
      background: linear-gradient(135deg, #e74c3c, #c0392b);
      color: white;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .toggle-notifications-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
    }
    
    .toggle-notifications-btn.active {
      background: linear-gradient(135deg, #2ecc71, #27ae60);
    }
    
    .toggle-notifications-btn.active:hover {
      box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
    }

    /* footer with developer credit */
    .card-footer {
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid rgba(212, 175, 55, 0.2);
      text-align: center;
    }
    
    .developer-credit {
      font-size: 14px;
      color: var(--accent-dark);
      font-weight: 600;
    }

    /* notification toast */
    .toast{
      position:fixed;
      right:30px;
      z-index:2002;
      width:340px;
      max-width:calc(100% - 60px);
      display:flex;gap:14px;align-items:center;
      padding:14px 16px;border-radius:16px;
      background: linear-gradient(90deg, rgba(10, 77, 104, 0.95), rgba(5, 191, 219, 0.9));
      color:#fff; 
      box-shadow: 0 15px 30px rgba(0,0,0,0.3);
      transform: translateY(100px); 
      opacity:0;
      transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
      pointer-events: none;
      border: 1px solid rgba(255,255,255,0.1);
    }
    
    .toast.show{ 
      transform: translateY(0); 
      opacity:1; 
      pointer-events:auto; 
    }

    .toast .q{
      width:50px;height:50px;border-radius:12px;overflow:hidden;flex-shrink:0;
      background: rgba(255,255,255,0.9); 
      display:flex;align-items:center;justify-content:center;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .toast .q img{ 
      width:80%; 
      height:80%; 
      object-fit:contain; 
    }

    .toast .txt{
      display:flex;flex-direction:column;gap:4px;
      min-width:0;
      flex: 1;
    }
    
    .toast .txt .title{ 
      font-weight:700; 
      color:var(--gold); 
      font-size:16px; 
    }
    
    .toast .txt .msg{ 
      font-size:15px; 
      color:#f3f4f6; 
      opacity:0.95; 
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    .toast .close-toast {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(255,255,255,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }
    
    .toast .close-toast:hover {
      background: rgba(255,255,255,0.3);
      transform: scale(1.1);
    }

    /* scroll style small */
    .posts::-webkit-scrollbar{ 
      width:8px 
    }
    
    .posts::-webkit-scrollbar-thumb{ 
      background: rgba(212, 175, 55, 0.3); 
      border-radius:6px 
    }
    
    .posts::-webkit-scrollbar-track {
      background: rgba(255,255,255,0.1);
      border-radius: 6px;
    }

    /* responsive */
    @media (max-width:480px){
      .card{ 
        width:73%; 
        padding:3px 
      }
      
      .toast{ 
        width:90%; 
        right:5%; 
        left:5% 
      }
      
      .notif-icon {
        width:45px;
        height:45px;
        font-size:18px;
      }
      
      .category-tabs {
        gap: 6px;
      }
      
      .category-tab {
        padding: 6px 10px;
        font-size: 12px;
      }
      
      .post .body {
        font-size: 14px;
      }
      
      .info-box {
        width: 90%;
        padding: 15px;
      }
    }
  </style>
</head>
<body>

  <!-- أيقونة الإشعارات -->
  <div class="notif-icon" id="openBtn" title="رسائل وأذكار">
    <i class="fa-solid fa-bell"></i>
  </div>

  <!-- مربع الشرح -->
  <div class="info-box" id="infoBox">
    <div class="close-btn" id="closeInfoBtn">
      <i class="fa-solid fa-xmark"></i>
    </div>
    <h3>بوت الأذكار الذكي</h3>
    <p>بوت مصمم لتذكيرك بالأذكار اليومية والآيات القرآنية بشكل منتظم</p>
    <ul class="features">
      <li><i class="fa-solid fa-check-circle"></i> يرسل إشعارات كل 4 دقائق</li>
      <li><i class="fa-solid fa-check-circle"></i> يحتوي على مكتبة شاملة من الأذكار</li>
      <li><i class="fa-solid fa-check-circle"></i> يعرض أذكار الصباح والمساء والنوم</li>
      <li><i class="fa-solid fa-check-circle"></i> يذكر بآيات قرآنية مؤثرة</li>
      <li><i class="fa-solid fa-check-circle"></i> واجهة سهلة الاستخدام</li>
    </ul>
    <a href="#" class="view-adhkar-btn" id="viewAdhkarBtn">عرض الأذكار</a>
    <div class="social-row">
      <a class="social-btn telegram" href="https://t.me/Nostalgiaayu" target="_blank" aria-label="Telegram">
        <i class="fa-brands fa-telegram-plane"></i>
      </a>
      <a class="social-btn whatsapp" href="https://wa.me/201033764805" target="_blank" aria-label="WhatsApp">
        <i class="fa-brands fa-whatsapp"></i>
        
      </a>
    </div>
    
  </div>

  <!-- overlay + card -->
  <div class="overlay" id="overlay">
    <div class="card" id="card">
      <div class="card-header">
        <div class="dev-line">تنبيهات أذكار</div>

        <div class="social-row">
          <a class="social-btn whatsapp" href="https://wa.me/201000000000" target="_blank" aria-label="WhatsApp">
            <i class="fa-brands fa-whatsapp"></i>
          </a>
          <a class="social-btn telegram" href="https://t.me/example" target="_blank" aria-label="Telegram">
            <i class="fa-brands fa-telegram-plane"></i>
          </a>
        </div>
      </div>

      <div class="divider"></div>

      <div class="category-tabs" id="categoryTabs">
        <div class="category-tab active" data-category="morning">أذكار الصباح</div>
        <div class="category-tab" data-category="evening">أذكار المساء</div>
        <div class="category-tab" data-category="sleep">أذكار النوم</div>
        <div class="category-tab" data-category="prayer">أذكار الصلاة</div>
        <div class="category-tab" data-category="quran">آيات قرآنية</div>
      </div>

      <div class="posts" id="postsContainer" aria-live="polite">
        <!-- posts injected by JS -->
      </div>

      <div class="notification-control">
        <button class="toggle-notifications-btn" id="toggleNotificationsBtn">
          <i class="fa-solid fa-bell"></i>
          <span>إيقاف الإشعارات</span>
        </button>
      </div>

      <div class="card-footer">
        <div class="developer-credit">تصميم وتطوير: أيمن محمود</div>
      </div>
    </div>
  </div>

  <!-- toast notification -->
  <div class="toast" id="toast">
    <div class="q"><img src="https://i.ibb.co/z6n4w1S/quran-icon.png" alt="مصحف"></div>
    <div class="txt">
      <div class="title">أذكار</div>
      <div class="msg" id="toastMsg">نص الاختبار سيظهر هنا...</div>
    </div>
    <div class="close-toast" id="closeToast">
      <i class="fa-solid fa-xmark"></i>
    </div>
  </div>

  <!-- هادئ نغمة تنبيه (صوت لطيف) -->
  <audio id="ping" src="https://assets.mixkit.co/sfx/preview/mixkit-positive-notification-951.mp3" preload="auto"></audio>

<script>
  // --- مكتبة الأذكار الكاملة ---
  const adhkarLibrary = {
    morning: [
      "أَصْـبَحْنا وَأَصْـبَـحَ المُـلْكُ لله وَالحَمْـدُ لله، لا إلهَ إلاّ اللّهُ وَحْـدَهُ لا شَـريكَ له، له المُـلكُ وله الحَمْـد، وهو على كلّ شَيءٍ قدير، رَبِّ أسْـأَلُـكَ خَـيرَ ما في هـذا اليوم وَخَـيرَ ما بَعْـدَه، وَأَعـوذُ بِكَ مِنْ شَـرِّ ما في هـذا اليوم وَشَرِّ ما بَعْـدَه، رَبِّ أَعـوذُبِكَ مِنَ الْكَسَلِ وَسـوءِ الْكِـبَر، رَبِّ أَعـوذُ بِكَ مِنْ عَـذابٍ في النّـارِ وَعَـذابٍ في القَـبْر.",
      "اللّهُـمَّ إِنِّـي أَصْبَـحْتُ أُشْـهِدُك، وَأُشْـهِدُ حَمَلَـةَ عَـرْشِـك، وَمَلائِكَتَك، وَجَمـيعَ خَلْـقِك، أَنَّـكَ أَنْـتَ اللهُ لا إلهَ إلاَّ أَنْـتَ وَحْـدَكَ لا شَريكَ لَـك، وَأَنَّ مُحَمّـداً عَبْـدُكَ وَرَسـولُـك.",
      "اللّهُـمَّ ما أَصْبَـحَ بي مِـنْ نِعْـمَةٍ أَو بِأَحَـدٍ مِـنْ خَلْـقِك، فَمِـنْكَ وَحْـدَكَ لا شريكَ لَـك، فَلَـكَ الْحَمْـدُ وَلَـكَ الشُّكْـر.",
      "اللّهُـمَّ بِكَ أَصْـبَحْنا وَبِكَ أَمْسَـينا، وَبِكَ نَحْـيا وَبِكَ نَمُـوتُ وَإِلَـيْكَ النُّـشُور.",
      "سُبْحَانَ اللهِ وَبِحَمْـدِهِ عَدَدَ خَلْـقِه، وَرِضـا نَفْسِـه، وَزِنَـةَ عَـرْشِـه، وَمِـدادَ كَلِمـاتِـه.",
      "حَسْبِيَ اللّهُ لا إلهَ إلاَّ هُوَ عَلَـيْهِ تَوَكَّـلتُ وَهُوَ رَبُّ العَرْشِ العَظـيم.",
      "بِسْمِ اللهِ الذي لا يَضُـرُّ مَعَ اسْمِـهِ شَيءٌ في الأرْضِ وَلا في السّمـاءِ وَهـوَ السّمـيعُ العَلـيم.",
      "اللّهُـمَّ إِنِّـي أَعـوذُ بِكَ مِنَ الْهَمِّ وَالْحَزَن، وَأَعـوذُ بِكَ مِنَ الْعَجْـزِ وَالْكَسَل، وَأَعـوذُ بِكَ مِنَ الْجُـبْنِ وَالْبُـخْل، وَأَعـوذُ بِكَ مِنْ غَلَبَـةِ الدَّيْنِ وَقَهْـرِ الرِّجال."
    ],
    evening: [
      "أَمْسَيْـنا وَأَمْسـى المـلك لله رَبِّ العـالَمـين، اللّهُـمَّ إِنِّـي أسْـأَلُـكَ خَـيْرَ هـذه اللَّـيْلَة، فَتْحَهـا، وَنَصْـرَهـا، وَنـورَهـا وَبَـرَكَتـَها، وَهُـداها، وَأَعـوذُ بِـكَ مِـنْ شَـرِّ ما فـيها وَشَـرِّ ما بَعْـدَها.",
      "اللّهُـمَّ إِنِّـي أَمْسَـيْتُ أُشْـهِدُك، وَأُشْـهِدُ حَمَلَـةَ عَـرْشِـك، وَمَلائِكَتَك، وَجَمـيعَ خَلْـقِك، أَنَّـكَ أَنْـتَ اللهُ لا إلهَ إلاَّ أَنْـتَ وَحْـدَكَ لا شَريكَ لَـك، وَأَنَّ مُحَمّـداً عَبْـدُكَ وَرَسـولُـك.",
      "اللّهُـمَّ ما أَمْسـى بي مِـنْ نِعْـمَةٍ أَو بِأَحَـدٍ مِـنْ خَلْـقِك، فَمِـنْكَ وَحْـدَكَ لا شريكَ لَـك، فَلَـكَ الْحَمْـدُ وَلَـكَ الشُّكْـر.",
      "حَسْبِـيَ اللّهُ لا إلهَ إلاَّ هُوَ عَلَـيْهِ تَوَكَّـلتُ وَهُوَ رَبُّ العَرْشِ العَظـيم.",
      "بِسْمِ اللهِ الذي لا يَضُـرُّ مَعَ اسْمِـهِ شَيءٌ في الأرْضِ وَلا في السّمـاءِ وَهـوَ السّمـيعُ العَلـيم.",
      "اللّهُـمَّ إِنِّـي أَعـوذُ بِكَ مِنَ الْهَمِّ وَالْحَزَن، وَأَعـوذُ بِكَ مِنَ الْعَجْـزِ وَالْكَسَل، وَأَعـوذُ بِكَ مِنَ الْجُـبْنِ وَالْبُـخْل، وَأَعـوذُ بِكَ مِنْ غَلَبَـةِ الدَّيْنِ وَقَهْـرِ الرِّجال.",
      "أَعـوذُ بِكَلِمـاتِ اللّهِ التّـامّـاتِ مِنْ شَـرِّ ما خَلَـق.",
      "يَا حَـيُّ يَا قَيّـومُ بِـرَحْمَـتِكَ أَسْتَـغـيثُ، أَصْلِـحْ لـي شَـأْنـي كُلَّـه، وَلا تَكِلـنـي إِلـى نَفْـسـي طَـرْفَةَ عَـيْن."
    ],
    sleep: [
      "بِاسْمِكَ اللَّهُمَّ أَمُوتُ وَأَحْيَا.",
      "اللَّهُمَّ قِنِي عَذَابَكَ يَوْمَ تَبْعَثُ عِبَادَكَ.",
      "بِاسْمِكَ رَبِّ وَضَعْتُ جَنْبِي، وَبِكَ أَرْفَعُهُ، فَإِنْ أَمْسَكْتَ نَفْسِي فَارْحَمْهَا، وَإِنْ أَرْسَلْتَهَا فَاحْفَظْهَا بِمَا تَحْفَظُ بِهِ عِبَادَكَ الصَّالِحِينَ.",
      "اللّهُمَّ إِنَّكَ خَلَقْتَ نَفْسِي وَأَنْتَ تَوَفَّاهَا، لَكَ مَمَاتُهَا وَمَحْيَاهَا، فَإِنْ أَحْيَيْتَهَا فَاحْفَظْهَا، وَإِنْ أَمَتَّهَا فَاغْفِرْ لَهَا، اللّهُمَّ إِنِّي أَسْأَلُكَ الْعَافِيَةَ.",
      "سُبْحَانَ اللَّهِ (ثَلَاثًا وَثَلَاثِينَ)، وَالْحَمْدُ لِلَّهِ (ثَلَاثًا وَثَلَاثِينَ)، وَاللَّهُ أَكْبَرُ (ثَلَاثًا وَثَلَاثِينَ).",
      "اللّهُمَّ رَبَّ السَّمَاوَاتِ وَرَبَّ الْأَرْضِ وَرَبَّ الْعَرْشِ الْعَظِيمِ، رَبَّنَا وَرَبَّ كُلِّ شَيْءٍ، فَالِقَ الْحَبِّ وَالنَّوَى، وَمُنْزِلَ التَّوْرَاةِ وَالْإِنْجِيلِ وَالْفُرْقَانِ، أَعُوذُ بِكَ مِنْ شَرِّ كُلِّ شَيْءٍ أَنْتَ آخِذٌ بِنَاصِيَتِهِ، اللّهُمَّ أَنْتَ الْأَوَّلُ فَلَيْسَ قَبْلَكَ شَيْءٌ، وَأَنْتَ الْآخِرُ فَلَيْسَ بَعْدَكَ شَيْءٌ، وَأَنْتَ الظَّاهِرُ فَلَيْسَ فَوْقَكَ شَيْءٌ، وَأَنْتَ الْبَاطِنُ فَلَيْسَ دُونَكَ شَيْءٌ، اقْضِ عَنَّا الدَّيْنَ وَأَغْنِنَا مِنَ الْفَقْرِ.",
      "يَا رَبِّ، لَكَ الْحَمْدُ كَمَا يَنْبَغِي لِجَلَالِ وَجْهِكَ وَعَظِيمِ سُلْطَانِكَ.",
      "اللّهُمَّ أَسْلَمْتُ نَفْسِي إِلَيْكَ، وَفَوَّضْتُ أَمْرِي إِلَيْكَ، وَأَلْجَأْتُ ظَهْرِي إِلَيْكَ، رَغْبَةً وَرَهْبَةً إِلَيْكَ، لَا مَلْجَأَ وَلَا مَنْجَا مِنْكَ إِلَّا إِلَيْكَ، آمَنْتُ بِكِتَابِكَ الَّذِي أَنْزَلْتَ، وَبِنَبِيِّكَ الَّذِي أَرْسَلْتَ."
    ],
    prayer: [
      "سُبْحَانَكَ اللَّهُمَّ وَبِحَمْدِكَ، تَبَارَكَ اسْمُكَ، وَتَعَالَى جَدُّكَ، وَلَا إِلَهَ غَيْرُكَ.",
      "اللّهُمَّ بَاعِدْ بَيْنِي وَبَيْنَ خَطَايَايَ كَمَا بَاعَدْتَ بَيْنَ الْمَشْرِقِ وَالْمَغْرِبِ، اللّهُمَّ اغْسِلْنِي مِنْ خَطَايَايَ بِالْمَاءِ وَالثَّلْجِ وَالْبَرَدِ.",
      "اللّهُمَّ إِنِّي أَعُوذُ بِكَ مِنْ عَذَابِ الْقَبْرِ، وَأَعُوذُ بِكَ مِنْ فِتْنَةِ الْمَسِيحِ الدَّجَّالِ، وَأَعُوذُ بِكَ مِنْ فِتْنَةِ الْمَحْيَا وَالْمَمَاتِ، اللّهُمَّ إِنِّي أَعُوذُ بِكَ مِنَ الْمَأْثَمِ وَالْمَغْرَمِ.",
      "اللّهُمَّ اغْفِرْ لِي ذَنْبِي كُلَّهُ، دِقَّهُ وَجِلَّهُ، وَأَوَّلَهُ وَآخِرَهُ، وَعَلَانِيَتَهُ وَسِرَّهُ.",
      "اللّهُمَّ أعِنِّي عَلَى ذِكْرِكَ وَشُكْرِكَ وَحُسْنِ عِبَادَتِكَ.",
      "رَبَّنَا آتِنَا فِي الدُّنْيَا حَسَنَةً وَفِي الْآخِرَةِ حَسَنَةً وَقِنَا عَذَابَ النَّارِ.",
      "قُلِ اللّهُمَّ مَالِكَ الْمُلْكِ تُؤْتِي الْمُلْكَ مَنْ تَشَاءُ وَتَنْزِعُ الْمُلْكَ مِمَّنْ تَشَاءُ وَتُعِزُّ مَنْ تَشَاءُ وَتُذِلُّ مَنْ تَشَاءُ، بِيَدِكَ الْخَيْرُ، إِنَّكَ عَلَى كُلِّ شَيْءٍ قَدِيرٌ.",
      "اللّهُمَّ إِنِّي ظَلَمْتُ نَفْسِي ظُلْمًا كَثِيرًا، وَلَا يَغْفِرُ الذُّنُوبَ إِلَّا أَنْتَ، فَاغْفِرْ لِي مَغْفِرَةً مِنْ عِنْدِكَ، وَارْحَمْنِي، إِنَّكَ أَنْتَ الْغَفُورُ الرَّحِيمُ."
    ],
    quran: [
      "وَقَالَ رَبُّكُمُ ادْعُونِي أَسْتَجِبْ لَكُمْ إِنَّ الَّذِينَ يَسْتَكْبِرُونَ عَنْ عِبَادَتِي سَيَدْخُلُونَ جَهَنَّمَ دَاخِرِينَ - غافر 60",
      "وَمَا كَانَ اللَّهُ لِيُعَذِّبَهُمْ وَأَنْتَ فِيهِمْ وَمَا كَانَ اللَّهُ مُعَذِّبَهُمْ وَهُمْ يَسْتَغْفِرُونَ - الأنفال 33",
      "أَمَّنْ يُجِيبُ الْمُضْطَرَّ إِذَا دَعَاهُ وَيَكْشِفُ السُّوءَ وَيَجْعَلُكُمْ خُلَفَاءَ الْأَرْضِ أَإِلَهٌ مَعَ اللَّهِ قَلِيلًا مَا تَذَكَّرُونَ - النمل 62",
      "وَإِذَا سَأَلَكَ عِبَادِي عَنِّي فَإِنِّي قَرِيبٌ أُجِيبُ دَعْوَةَ الدَّاعِ إِذَا دَعَانِ فَلْيَسْتَجِيبُوا لِي وَلْيُؤْمِنُوا بِي لَعَلَّهُمْ يَرْشُدُونَ - البقرة 186",
      "يَا أَيُّهَا الَّذِينَ آمَنُوا اسْتَعِينُوا بِالصَّبْرِ وَالصَّلَاةِ إِنَّ اللَّهَ مَعَ الصَّابِرِينَ - البقرة 153",
      "اللَّهُ لَا إِلَهَ إِلَّا هُوَ الْحَيُّ الْقَيُّومُ لَا تَأْخُذُهُ سِنَةٌ وَلَا نَوْمٌ لَهُ مَا فِي السَّمَاوَاتِ وَمَا فِي الْأَرْضِ - البقرة 255",
      "وَمَنْ يَتَّقِ اللَّهَ يَجْعَلْ لَهُ مَخْرَجًا وَيَرْزُقْهُ مِنْ حَيْثُ لَا يَحْتَسِبُ - الطلاق 2-3",
      "قُلْ لَنْ يُصِيبَنَا إِلَّا مَا كَتَبَ اللَّهُ لَنَا هُوَ مَوْلَانَا وَعَلَى اللَّهِ فَلْيَتَوَكَّلِ الْمُؤْمِنُونَ - التوبة 51"
    ]
  };

  // عناصر DOM
  const openBtn = document.getElementById('openBtn');
  const overlay = document.getElementById('overlay');
  const card = document.getElementById('card');
  const postsContainer = document.getElementById('postsContainer');
  const toast = document.getElementById('toast');
  const toastMsg = document.getElementById('toastMsg');
  const ping = document.getElementById('ping');
  const categoryTabs = document.getElementById('categoryTabs');
  const infoBox = document.getElementById('infoBox');
  const closeInfoBtn = document.getElementById('closeInfoBtn');
  const viewAdhkarBtn = document.getElementById('viewAdhkarBtn');
  const toggleNotificationsBtn = document.getElementById('toggleNotificationsBtn');
  const closeToast = document.getElementById('closeToast');
  
  // الفئة الحالية المعروضة
  let currentCategory = 'morning';
  
  // حالة الإشعارات
  let notificationsEnabled = true;
  let interval;
  
  // تعبئة البوستات داخل الكارت حسب الفئة
  function renderPosts(category = currentCategory) {
    postsContainer.innerHTML = '';
    const posts = adhkarLibrary[category] || [];
    
    posts.forEach((txt, index) => {
      const el = document.createElement('div');
      el.className = 'post';
      
      // تحديد اسم الفئة بالعربية
      let categoryName = '';
      switch(category) {
        case 'morning': categoryName = 'أذكار الصباح'; break;
        case 'evening': categoryName = 'أذكار المساء'; break;
        case 'sleep': categoryName = 'أذكار النوم'; break;
        case 'prayer': categoryName = 'أذكار الصلاة'; break;
        case 'quran': categoryName = 'آيات قرآنية'; break;
      }
      
      el.innerHTML = `
        <div class="quran"><img src="https://i.ibb.co/z6n4w1S/quran-icon.png" alt="مصحف"></div>
        <div class="body">
          ${escapeHtml(txt)}
          <div class="category">${categoryName}</div>
        </div>
      `;
      postsContainer.appendChild(el);
    });
  }

  // هاندل فتح مربع الشرح
  openBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    // إظهار مربع الشرح
    infoBox.classList.add('active');
    
    // إخفاء مربع الشرح بعد 5 ثواني إذا لم يتم إغلاقه يدويًا
    setTimeout(() => {
      if (infoBox.classList.contains('active')) {
        infoBox.classList.remove('active');
      }
    }, 5000);
  });

  // هاندل إغلاق مربع الشرح
  closeInfoBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    infoBox.classList.remove('active');
  });

  // هاندل فتح الأذكار من مربع الشرح
  viewAdhkarBtn.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();
    // إغلاق مربع الشرح
    infoBox.classList.remove('active');
    // فتح نافذة الأذكار
    overlay.classList.add('active');
    setTimeout(() => card.classList.add('active'), 40);
  });

  // هاندل فتح وغلق الكارت
  document.addEventListener('click', (e) => {
    // إذا تم النقر خارج مربع الشرح، أغلقه
    if (!e.target.closest('.info-box') && !e.target.closest('.notif-icon')) {
      infoBox.classList.remove('active');
    }
  });

  // غلق عند الضغط خارج البطاقة
  overlay.addEventListener('click', (e) => {
    if(e.target === overlay){
      card.classList.remove('active');
      setTimeout(()=> overlay.classList.remove('active'), 320);
    }
  });

  // منع إغلاق عند الضغط داخل الكارد
  card.addEventListener('click', (e)=> e.stopPropagation());

  // التعامل مع تبويبات الفئات
  categoryTabs.addEventListener('click', (e) => {
    if (e.target.classList.contains('category-tab')) {
      // إزالة الفئة النشطة من جميع التبويبات
      document.querySelectorAll('.category-tab').forEach(tab => {
        tab.classList.remove('active');
      });
      
      // إضافة الفئة النشطة للتبويب المضغوط
      e.target.classList.add('active');
      
      // تحديث الفئة الحالية
      currentCategory = e.target.dataset.category;
      
      // إعادة عرض الأذكار حسب الفئة الجديدة
      renderPosts(currentCategory);
    }
  });

  // هاندل زر إيقاف/تشغيل الإشعارات
  toggleNotificationsBtn.addEventListener('click', () => {
    notificationsEnabled = !notificationsEnabled;
    
    if (notificationsEnabled) {
      // تفعيل الإشعارات
      toggleNotificationsBtn.classList.add('active');
      toggleNotificationsBtn.innerHTML = '<i class="fa-solid fa-bell"></i><span>إيقاف الإشعارات</span>';
      startNotifications();
    } else {
      // إيقاف الإشعارات
      toggleNotificationsBtn.classList.remove('active');
      toggleNotificationsBtn.innerHTML = '<i class="fa-solid fa-bell-slash"></i><span>تفعيل الإشعارات</span>';
      stopNotifications();
    }
  });

  // هاندل زر إغلاق الإشعار
  closeToast.addEventListener('click', () => {
    toast.classList.remove('show');
  });

  // وظيفة بدء الإشعارات
  function startNotifications() {
    if (interval) clearInterval(interval);
    interval = setInterval(showToast, 240000 ); // 20 ثانية
    showToast(); // عرض إشعار فوري
  }

  // وظيفة إيقاف الإشعارات
  function stopNotifications() {
    if (interval) {
      clearInterval(interval);
      interval = null;
    }
  }

  // وظيفة عرض التوست (التنبيه العائم)
  let notificationIndex = 0;
  let notificationCategories = Object.keys(adhkarLibrary);
  let currentNotificationCategory = 0;
  
  function showToast() {
    // الحصول على فئة الإشعار الحالية
    const category = notificationCategories[currentNotificationCategory];
    const posts = adhkarLibrary[category];
    
    // اختيار ذكر عشوائي من الفئة الحالية
    const randomIndex = Math.floor(Math.random() * posts.length);
    const selectedZikr = posts[randomIndex];
    
    // عرض الذكر في الإشعار
    toastMsg.textContent = selectedZikr;
    toast.classList.add('show');

    // تشغيل الصوت بلطف
    if(ping){ 
      ping.currentTime = 0; 
      ping.volume = 0.45; 
      ping.play().catch(()=>{}); 
    }

    // الانتقال إلى الفئة التالية للإشعار القادم
    currentNotificationCategory = (currentNotificationCategory + 1) % notificationCategories.length;
  }

  // تهيئة الصفحة
  renderPosts();
  
  // تعيين الحالة الابتدائية للزر
  toggleNotificationsBtn.classList.add('active');
  toggleNotificationsBtn.innerHTML = '<i class="fa-solid fa-bell"></i><span>إيقاف الإشعارات</span>';
  
  // بدء الإشعارات
  startNotifications();
  
  // عرض تنبيه أولي بعد لحظة
  setTimeout(showToast, 900);

  // فنكشن لحماية نصوص من XSS لو دخلت نصوص ديناميكية
  function escapeHtml(str){
    return str.replace(/[&<>"'`=\/]/g, function(s){
      return ({
        '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;', "'":'&#39;','/':'&#x2F;','`':'&#x60;','=':'&#x3D;'
      })[s];
    });
  }
</script>
</body>
</html>
	</div>		<!---->
	<div onclick="getRoomList();" class="head_option menutrig" style="position: absolute;top: 128px;left:68px;z-index: 1;">
    <i class="fa fa-home"></i>

	</div>
	<div class="sub_options" style="position: absolute;top: 300px;left: 8px;z-index: 1;" onclick="getTextOptions();">
                            <img src="default_images/icons/pencilaaa.png">
                        </div>
	<!--ayoub end edit-->

							<ul class="back_chat" id="show_chat" value="1">
								<ul id="chat_logs_container">
								</ul>
							</ul>
						</div>
						<div value="0" id="main_emoticon" class="back_box bshadow">
							<div class="emo_head bborder main_emo_head">
								<?php if(canEmo()){ ?>
									<div data="base_emo" class="bselected emo_menu emo_menu_item"><img class="emo_select" src="emoticon_icon/base_emo.png"/></div>
									<?php echo emoItem(1); ?>
								<?php } ?>
								<div class="empty_emo">
								</div>
								<div class="emo_menu" onclick="hideEmoticon();">
									<i class="fa fa-times"></i>
								</div>
							</div>
							<div id="main_emo" class="emo_content">
								<?php listSmilies(1); ?>
							</div>
						</div>
						<div id="main_input_extra" class="bshadow back_box">
						                        <?php if(usePlayer()){ ?>
                        <div style="direction: rtl;" class="chat_player">
                            <div class="player_menu player_elem menutrig" onclick="showMenu('player_options');">
                                <i class="fa fa-sliders menutrig"></i>
                            </div>
                            <div id="player_actual_status" class="player_elem player_button turn_on_play">
                                <i id="current_play_btn" class="fa fa-play-circle"></i>
                            </div>
                            <div id="current_player" class="player_elem player_current">
                                <p class="bellips text_xsmall theme_color"><?php echo $lang['station']; ?></p>
                                <p class="bellips" id="current_station"><?php echo $radio['player_title']; ?></p>
                            </div>
                        </div>
                        <?php } ?>
						<div style="text-align: center;font-size: 25px;color: green;" class="sub_options" onclick="toggleRight();">
                            <i class="fa fa-user-plus"></i>
                        </div>
                        <div class="sub_options" onclick="clearChatPublic();">
                            <img src="default_images/site/red-trash-can-icon.svg">
                        </div>
<!-- <div class="sub_options" onclick="openColorSelector();">
    <div class="sub_options">
	<img style="width:auto;height:35px;vertical-align: bottom;" src="default_images/site/icon.png" />
</div>
</div>

<script>
    function openColorSelector() {
        window.open(
            'https://shkleeg.site/chat/addons/coler/color_selector.php', 
            '_blank', 
            'width=650,height=400,scrollbars=no,resizable=no'
        );
    }
</script> -->
                       <?php if(boomAllow(100)){ ?>
							<?php if(boomAllow($cody['can_clear_room'])){ ?>
							<div onclick="processChatCommand('/clear');" class="sub_options">
								<i style="font-size: 30px;" class="fa fa-times error"></i>
							</div>
							<?php } ?>
							<?php } ?>
							<?php if(boomAllow(100)){ ?>
							<?php if(boomAllow($cody['can_clear_room'])){ ?>
							<div onclick="processChatCommand('/clearcache');" class="sub_options">
								<i style="font-size: 30px;" class="fa-solid fa-truck-fast"></i>
							</div>
							<?php } ?>
							<?php } ?>
							<?php if(canUploadChat()){ ?>
							<div class="sub_options">
								<img src="default_images/icons/upload.svg"/>
								<input id="chat_file" class="up_input" onchange="uploadChatFile();" type="file"/>
							</div>
							<?php } ?>
							                        <?php if(canColor()){ ?>
                        <div class="sub_options" onclick="getTextOptions();">
                            <img src="default_images/icons/pencil.svg" />
                        </div>
                        <?php } ?>
						</div>
						<div id="quote_controller" class="qwraper back_quote bshadow">
							<div id="quote_control" class="qcontrol" data="0">
								<div class="qavatarwrap">
									<img id="quote_avatar" class="qavatar" src=""/>
								</div>
								<div class="qusername_wrap">
									<p class="text_xsmall bold quotequote theme_color"><?php echo $lang['quote']; ?></p>
									<p id="quoted_user" class="qusername"></p>
								</div>
								<div class="qcancel" onclick="resetQuote();">
									<i class="fa fa-times"></i>
								</div>
							</div>
						</div>
						<div id="main_progress" class="uprogress">
							<div class="uprogress_wrap">
								<div id="mprogress" class="uprogress_progress">
								</div>
								<div class="uprogress_content btable">
									<div class="bcell_mid uprogress_text">
										<p class="bold text_small"><i class="fa fa-upload"></i> <?php echo $lang['upload']; ?></p>
									</div>
									<div class="bcell_mid uprogress_icon" onclick="cancelMainUp();">
										<i class="fa fa-times"></i>
									</div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
				<div id="top_chat_container" class="back_input input_wrap">
				    <div id="main_input_icons" class="bborder">
    <div class="minput_icon_list">
        <div onclick="getLeaderOfXc('leader_level');" class="minput_icon bhover">
    <i class="fa fa-solid fa-layer-group" style="color:#ff9100;"></i>
    </div><div onclick="getLeaderOfXc('leader_like');" class="minput_icon bhover">
    <i class="fa fa--solid fa-thumbs-up" style="color:#0000ff;"></i>
    </div><div onclick="getLeaderOfXc('leader_gift');" class="minput_icon bhover">
    <i class="fa fa--solid fa-gift" style="color:#ff0000;"></i>
    </div><div onclick="getSoundSetting();" class="minput_icon bhover">
    <i class="fa fa--solid fa-volume-high" style="color:#009e22;"></i>
    </div><div onclick="getCallSettings();" class="minput_icon bhover">
    <i class="fa fa-solid fa-video" style="color:#000000;"></i>
    </div><div onclick="changeUsername();" class="minput_icon bhover">
    <i class="fa fa--solid fa-pen" style="color:#000000;"></i>
    </div><div onclick="changeShared();" class="minput_icon bhover">
    <i class="fa fa--solid fa-gear" style="color:#000000;"></i>
    </div><div onclick="getFriends();" class="minput_icon bhover">
    <i class="fa fa--solid fa-user-group" style="color:#000000;"></i>
    </div><div onclick="getPrivateSettings();" class="minput_icon bhover">
    <i class="fa fa--solid fa-lock" style="color:#000000;"></i>
    </div><div onclick="getDisplaySetting();" class="minput_icon bhover">
    <i class="fa fa--solid fa-display" style="color:#000000;"></i>
    </div>    </div>
</div>
					<div id="container_input" class="no_rtl hidden">
					    
					    
						<form id="main_input" name="chat_data" action="" method="post">
							<div class="input_table">
							    
								<div id="inputt_right" class="main_item">
									<button type="submit"  class="send_btn" id="submit_button"><i class="fa fa-paper-plane"></i></button>
								</div>
								<div id="ok_sub_item" class="input_item main_item base_main sub_hidden" onclick="getChatSub();">
									<i class="fa fa-plus input_icon bblock"></i>
								</div>
								<div value="0" class="input_item main_item base_main" onclick="showEmoticon();" id="emo_item">
									<i class="fa-regular fa-face-smile bblock"></i>
								</div>
								<div id="main_input_box" class="td_input">
									<input data-paste="<?php echo mainPaste(); ?>" type="text" spellcheck="false" name="content" placeholder="<?php echo $lang['type_something']; ?>" maxlength="<?php echo $setting['max_main']; ?>" id="content" autocomplete="off"/>
								</div>

							</div>
						</form>
					</div>
					<div id="main_disabled" class="hidden">
						<div id="disabled_content" class="btable">
							<div class="bcell_mid bellips centered_element hpad10">
								<?php echo $lang['main_disabled']; ?>
							</div>
						</div>
					</div>
					<div id="main_load">
						<div id="main_load_content">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div id="private_center" class="privelem privhide pboxed">
		<div id="private_box" class="privelem back_priv prifoff <?php echo privCheck(); ?>">
			<div class="top_panel btable back_ptop" id="private_top">
				<div id="private_av_wrap" class="bcell_mid">
					<img data="" id="private_av" class="get_info" src="">
				</div>
				<div onclick="" id="private_name" class="bcell_mid bellips">
					<p class="bellips"></p>
				</div>
				<div id="private_boxing" onclick="privateBox();" class="private_opt fhide">
					<i class="fa fa-compress"></i>
				</div>
				<div id="private_paneling" onclick="privatePanel();" class="private_opt">
					<i class="fa fa-expand"></i>
				</div>
				<div id="priv_minimize" onclick="togglePrivate(1);" class="private_opt">
					<i class="fa fa-minus"></i>
				</div>
				<div id="private_call" data="" class="opencall private_opt">
					<i class="fa fa-phone"></i>
				</div>
				<div id="private_min" data-menu="private_opt" class="show_menu menutrig private_opt">
					<i class="fa fa-cog"></i>
				</div>
				<div id="private_close" class="private_opt">
					<i class="fa fa-times"></i>
				</div>
			</div>
			<div id="private_wrap_content" class="pcontent">
				<div id="private_content" class="back_priv pcontent" value="1">
					<div id="inside_wrap_private">
						<ul id="show_private_wrap">
							<ul id="show_private">
							</ul>
						</ul>
					</div>
				</div>
				<div id="privspin" class="large_spinner">
					<i class="fa fa-circle-notch fa-spin fa-fw bspin boom_spinner"></i>
				</div>
				<div id="priv_input_extra" class="back_box bshadow">
					<?php if(canUploadPrivate()){ ?>
					<div class="psub_options">
						<img src="default_images/icons/upload.svg"/>
						<input id="private_file" class="up_input" onchange="uploadPrivateFile();" type="file"/>
					</div>
					<?php } ?>
				</div>
				<div id="pquote_controller" class="qwraper back_quote bshadow">
					<div id="pquote_control" class="qcontrol" data="0">
						<div class="qavatarwrap">
							<img id="pquote_avatar" class="qavatar" src=""/>
						</div>
						<div class="qusername_wrap">
							<p class="text_xsmall bold theme_color quotequote"><?php echo $lang['quote']; ?></p>
							<p id="pquoted_user" class="qusername"></p>
						</div>
						<div class="qcancel" onclick="resetPrivateQuote();">
							<i class="fa fa-times"></i>
						</div>
					</div>
				</div>
				<div id="private_opt" class="sysmenu float_menu back_menu bshadow">
					<div class="submenu_item submenu" onclick="ignoreThisUser();">
						<?php echo subMenu('ban', $lang['ignore'], $lang['ignore_text']); ?>
					</div>
					<?php if(!canManageReport() && canReport()){ ?>
					<div class="submenu_item submenu" onclick="reportPrivateLog();">
						<?php echo subMenu('exclamation-circle', $lang['report'], $lang['report_text']); ?>
					</div>
					<?php } ?>
					<div class="submenu_item submenu" onclick="getPrivateSettings();">
						<?php echo subMenu('cogs', $lang['private_settings'], $lang['private_text']); ?>
					</div>
					<?php if(canDeletePrivate()){ ?>
					<div class="submenu_item submenu" onclick="confirmClearPrivate();">
						<?php echo subMenu('trash', $lang['delete'], $lang['clear_text']); ?>
					</div>
					<?php } ?>
				</div>
				<div id="private_emoticon" class="back_box bshadow">
					<div class="emo_head bborder private_emo_head">
						<?php if(canEmo()){ ?>
							<div data="base_emo" class="bselected emo_menu emo_menu_item_priv"><img class="emo_select" src="emoticon_icon/base_emo.png"/></div>
							<?php echo emoItem(2); ?>
						<?php } ?>
						<div class="empty_emo">
						</div>
						<div class="emo_menu" id="emo_close_priv" onclick="hidePrivEmoticon();">
							<i class="fa fa-times"></i>
						</div>
					</div>
					<div id="private_emo" class="emo_content_priv">
						<?php listSmilies(2); ?>
					</div>
				</div>
				<div id="private_progress" class="uprogress">
					<div class="uprogress_wrap">
						<div id="pprogress" class="uprogress_progress">
						</div>
						<div class="uprogress_content btable">
							<div class="bcell_mid uprogress_text">
								<p class="bold text_small"><i class="fa fa-upload"></i> <?php echo $lang['upload']; ?></p>
							</div>
							<div class="bcell_mid uprogress_icon" onclick="cancelPrivateUp();">
								<i class="fa fa-times"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="priv_input" class="back_pinput input_wrap">
				<div id="private_input" class="no_rtl back_input">
					<form id="message_form"  action="" method="post" name="private_form">
						<div class="input_table">
							<div id="ok_priv_item" class="input_item main_item sub_hidden" onclick="getPrivSub();">
								<i class="fa fa-plus input_icon bblock"></i>
							</div>
							<div value="0" id="emo_item_priv" class="input_item main_item" onclick="showPrivEmoticon();">
								<i class="fa-regular fa-face-smile"></i>
							</div>
							<div id="private_input_box" class="td_input">
								<input data-paste="<?php echo privatePaste(); ?>" spellcheck="false" id="message_content" placeholder="<?php echo $lang['type_something']; ?>" maxlength="<?php echo $setting['max_private']; ?>" autocomplete="off"/>
							</div>
							<div id="message_send" class="main_item">
								<button class="send_btn" id="private_send"><i class="fa fa-paper-plane"></i></button>
							</div>
						</div>
					</form>
				</div>
				<div id="private_disabled" class="hidden">
					<div id="private_disable" class="btable">
						<div class="bcell_mid bellips centered_element hpad10">
							<?php echo $lang['private_disabled']; ?>
						</div>
					</div>
				</div>
				<div id="private_load">
					<div id="private_load_content">
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div id="chat_right" class="cright back_panel lborder bshadow pheight">
		<div id="right_panel_bar" class="bborder panel_bar">
			<div onclick="closeRight();" class="panel_bar_item">
				<i class="fa fa-times"></i>
			</div>
			<div class="bcell_mid">
			</div>
			<div id="users_option"title="<?php echo $lang['user_list']; ?>" class="bselected panel_option" onclick="userReload(1);">
				<i class="fa fa-users"></i>
			</div>
			<?php if(boomAllow(1)){ ?>
			<div id="friends_option" title="<?php echo $lang['friend_list']; ?>" class="panel_option" onclick="myFriends(1);">
				<i class="fa fa-user"></i>
			</div>
			<?php } ?>
			<div id="search_option" title="<?php echo $lang['search_user']; ?>" class="panel_option" onclick="getSearchUser();">
				<i class="fa fa-search"></i>
			</div>
		</div>
		<div id="chat_right_data" class="crheight">
		</div>
	</div>
</div>



<div id="player_menu" class="float_menu back_menu sysmenu">
	<div id="player_menu_content" class="float_content">
		<div class="player_wrap hpad5">
			<div id="current_player" class="cur_play">
				<div class="btable bborder vpad10">
					<div id="player_actual_status" class="splay_btn bcell_mid turn_on_play">
						<i class="fa fa-play-circle i_btm" id="current_play_btn"></i>
					</div>
					<div class="bcell_mid hpad5">
						<p class="text_xsmall theme_color">محطة</p>
						<p id="current_station">فرح اف ام - سورية</p>
					</div>
					<div data-menu="station_menu" class="bcell_mid player_change show_menu">
						<i class="fa fa-list"></i>
					</div>
				</div>
			</div>
			<div class="player_volume">
				<div id="sound_display" class="bcell_mid">
					<i class="fa fa-volume-down show_sound"></i>
				</div>
				<div id="player_volume" class="bcell_mid boom_slider">
					<div id="slider"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="station_menu" class="float_menu back_menu sysmenu">
	<div class="ftop_elem float_top">
		<div class="ftop_opt_btn show_menu" data-menu="player_menu">
			<i class="fa fa-chevron-left"></i> 
		</div>
		<div class="ftop_opt_text">
			قائمة المحطات		</div>
	</div>
	<div id="station_menu_content" class="float_content">
		<div class="radio_item brad5 bbackhover sub_list_item" data="https://radio.farah.fm/;&quot; type=&quot;audio/mpeg"><div class="sub_list_name">فرح اف ام - سورية</div></div><div class="radio_item brad5 bbackhover sub_list_item" data="https://radio-ssl.com/8018/stream"><div class="sub_list_name">كل العرب</div></div><div class="radio_item brad5 bbackhover sub_list_item" data="https://nashama.radioca.st/stream"><div class="sub_list_name">نشامى اف ام - عمان الاردن</div></div><div class="radio_item brad5 bbackhover sub_list_item" data="https://ahmsamir.radioca.st/stream"><div class="sub_list_name">مصر</div></div><div class="radio_item brad5 bbackhover sub_list_item" data="https://stream.zeno.fm/0ms1g2tgr18uv"><div class="sub_list_name">استمع الى اذاعات مصريّة</div></div><div class="radio_item brad5 bbackhover sub_list_item" data="https://webradio.tda.dz/Chaine2_64K.mp3"><div class="sub_list_name">راديو الجزائر</div></div><div class="radio_item brad5 bbackhover sub_list_item" data="https://l3.itworkscdn.net/itwaudio/9012/stream"><div class="sub_list_name">راديو سومر FM - العراق</div></div><div class="radio_item brad5 bbackhover sub_list_item" data="https://radio.shafaq.com/radio"><div class="sub_list_name">راديو شفق العراق</div></div><div class="radio_item brad5 bbackhover sub_list_item" data="https://radioshamfm.grtvstream.com:8400/stream"><div class="sub_list_name">شام</div></div>	</div>
</div>


<div id="private_menu" data="private_menu_content" class="sysmenu back_menu float_menu">
	<div class="ftop_elem float_top">
		<div class="ftop_opt_icon">
			<i class="fa fa-comments"></i> 
		</div>
		<div class="ftop_opt_text">
			<?php echo $lang['private']; ?>
		</div>
		<div class="ftop_empty">
		</div>
		<div class="ftop_action" onclick="openPrivateRead();">
			<i class="fa fa-square-check"></i>
		</div>
		<div class="ftop_action" onclick="clearPrivateList();">
			<i class="fa fa-trash-can"></i>
		</div>
	</div>
	<div class="float_content">
		<div id="private_menu_content">
		</div>
	</div>
</div>


<div id="report_menu" data="report_menu_content" class="sysmenu back_menu float_menu">
	<div class="ftop_elem float_top">
		<div class="ftop_opt_icon">
			<i class="fa fa-flag"></i> 
		</div>
		<div class="ftop_opt_text">
			<?php echo $lang['report']; ?>
		</div>
	</div>
	<div class="float_content">
		<div id="report_menu_content">
		</div>
	</div>
</div>


<div id="friends_menu" data="friends_menu_content" class="sysmenu back_menu float_menu">
	<div class="ftop_elem float_top">
		<div class="ftop_opt_icon">
			<i class="fa fa-user-plus"></i> 
		</div>
		<div class="ftop_opt_text">
			<?php echo $lang['friend_request']; ?>
		</div>
	</div>
	<div id="friends_menu_content" class="float_content">
	</div>
</div>


<div id="notification_menu" data="notification_menu_content" class="sysmenu back_menu float_menu">
	<div id="float_top_ref" class="ftop_elem float_top">
		<div class="ftop_opt_icon">
			<i class="fa fa-bell"></i> 
		</div>
		<div class="ftop_opt_text">
			<?php echo $lang['notification']; ?>
		</div>
		<div class="ftop_action" onclick="clearNotification();">
			<i class="fa fa-trash-can"></i>
		</div>
	</div>
	<div class="float_content">
		<div id="notification_menu_content">
		</div>
	</div>
</div>


<div id="status_menu" class="sysmenu back_menu float_menu">
	<div class="ftop_elem float_top">
		<div class="ftop_opt_btn show_menu" data-menu="chat_main_menu">
			<i class="fa fa-chevron-left"></i> 
		</div>
		<div class="ftop_opt_text">
			<?php echo $lang['status']; ?>
		</div>
	</div>
	<div class="float_content">
		<div id="status_menu_content">
			<?php echo listAllStatus(); ?>
		</div>
	</div>
</div>

<?php if(useWallet()){ ?>
<div id="bank_menu" class="sysmenu back_menu float_menu">
	<div class="ftop_elem float_top">
		<div class="ftop_opt_btn show_menu" data-menu="chat_main_menu">
			<i class="fa fa-chevron-left"></i> 
		</div>
		<div class="ftop_opt_text">
			<?php echo $lang['wallet']; ?>
		</div>
	</div>
	<div class="float_content">
		<div id="bank_menu_content">
			<div class="hpad10 bpad10">
				<div class="vpad10 blist">
					<p class="text_xsmall bold bpad5"><?php echo $lang['ruby']; ?></p>
					<div class="btable">
						<div class="bcell_mid ruby_icon">
							<img src="<?php echo rubyIcon(); ?>"/>
						</div>
						<div id="ruby" class="bcell_mid ruby_text bold hpad5">
							<?php echo $data['user_ruby']; ?>
						</div>
					</div>
				</div>
				<div class="vpad10">
					<p class="text_xsmall bold bpad5"><?php echo $lang['gold']; ?></p>
					<div class="btable">
						<div class="bcell_mid gold_icon">
							<img src="<?php echo goldIcon(); ?>"/>
						</div>
						<div id="gold" class="bcell_mid gold_text bold hpad5">
							<?php echo $data['user_gold']; ?>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<?php } ?>
<div id="room_options_menu" class="sysmenu back_menu float_menu">
	<div class="ftop_elem float_top">
		<div class="ftop_opt_btn show_menu" data-menu="chat_left_menu">
			<i class="fa fa-chevron-left"></i> 
		</div>
		<div class="ftop_opt_text">
			<?php echo $lang['room_options']; ?>
		</div>
	</div>
	<div id="room_options_menu_content" class="float_content">
		<div class="float_section bborder">
			<div class="fmenu_item bhover mmenu_item" onclick="openRoomSettings();">
				<div class="fmenu_icon">
					<i class="fa fa-cogs menui"></i>
				</div>
				<div class="fmenu_text">
					<?php echo $lang['settings']; ?>
				</div>
			</div>
			<div class="fmenu_item bhover mmenu_item" onclick="openRoomStaff();">
				<div class="fmenu_icon">
					<i class="fa fa-shield menui"></i>
				</div>
				<div class="fmenu_text">
					<?php echo $lang['manage_staff']; ?>
				</div>
			</div>
		</div>
		<div class="float_section">
			<div class="fmenu_item bhover mmenu_item" onclick="openRoomActions();">
				<div class="fmenu_icon">
					<i class="fa fa-bolt menui"></i>
				</div>
				<div class="fmenu_text">
					<?php echo $lang['manage_action']; ?>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="chat_left_menu" class="sysmenu back_menu float_menu modern-menu">
    <div class="float_ctop modern-header" id="mmenul_top">
        <div class="modern-room-info">
            <div class="room-icon-container">
                <img class="glob_ricon modern-room-icon" src="<?php echo myRoomIcon($room['room_icon']); ?>"/>
            </div>
            <div class="room-details">
                <div class="mroom_text modern-label">
                    <?php echo $lang['current_room']; ?>
                </div>
                <div class="mroom_name modern-room-name bellips glob_rname">
                    <?php echo $room['room_name']; ?>
                </div>
            </div>
            <div class="settings-trigger room_granted nogranted show_menu" data-menu="room_options_menu">
                <i class="fas fa-cog modern-settings-icon"></i>
            </div>
        </div>
    </div>
    <div id="left_menu_content" class="float_content modern-content">
        <div id="left_main_content">
            <div id="room_menu" class="menu-item modern-menu-item" onclick="getRoomList();">
                <div class="menu-icon">
                    <i class="fas fa-home modern-icon"></i>
                </div>
                <div class="menu-text">
                    <?php echo $lang['room_list']; ?>
                </div>
            </div>
            <?php if(useWall() && boomAllow(1)){ ?>
            <div id="wall_menu" class="menu-item modern-menu-item" onclick="getWall();">
                <div class="menu-icon">
                    <i class="fas fa-rss modern-icon"></i>
                </div>
                <div class="menu-text">
                    <?php echo $lang['wall']; ?>
                </div>
            </div>
            <?php } ?>
            <div id="news_menu" class="menu-item modern-menu-item has-notification" onclick="getNews();">
                <div class="menu-icon">
                    <i class="fas fa-newspaper modern-icon"></i>
                </div>
                <div class="menu-text">
                    <?php echo $lang['system_news']; ?>
                </div>
                <div class="notification-badge">
                    <div id="news_notify" class="modern-notification"></div>
                </div>
            </div>
            <?php if(useLevel()){ ?>
            <div id="leader_menu" class="menu-item modern-menu-item" onclick="getLeaderboard();">
                <div class="menu-icon">
                    <i class="fas fa-trophy modern-icon"></i>
                </div>
                <div class="menu-text">
                    <?php echo $lang['leaderboard']; ?>
                </div>
            </div>
            <?php } ?>
        </div>
    </div>
</div>

<style>
/* Modern Menu Styles */
.modern-menu {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 280px;
    transition: all 0.3s ease;
}

.modern-header {
    background: linear-gradient(135deg, #ff5c00 0%, #764ba2 100%);
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modern-room-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.room-icon-container {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.modern-room-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.room-details {
    flex: 1;
    margin: 0 15px;
}

.modern-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.modern-room-name {
    color: white;
    font-weight: 600;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.settings-trigger {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-trigger:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(30deg);
}

.modern-settings-icon {
    color: white;
    font-size: 16px;
}

.modern-content {
    padding: 8px 0;
}

.modern-menu-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
}

.modern-menu-item:last-child {
    border-bottom: none;
}

.modern-menu-item:hover {
    background: rgba(102, 126, 234, 0.05);
    padding-left: 25px;
}

.menu-icon {
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
}

.modern-icon {
    color: #667eea;
    font-size: 18px;
    width: 20px;
    text-align: center;
}

.menu-text {
    flex: 1;
    font-weight: 500;
    color: #333;
    font-size: 15px;
}

.notification-badge {
    position: relative;
}

.modern-notification {
    background: #ff4757;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(255, 71, 87, 0.3);
}

.has-notification .menu-text {
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modern-menu {
        width: 260px;
    }
    
    .modern-room-name {
        font-size: 14px;
    }
    
    .modern-menu-item {
        padding: 12px 18px;
    }
}
</style>
	</div>
</div>

<div id="chat_main_menu" class="sysmenu back_menu float_menu">
	<div class="float_ctop" id="mmenu_top">
		<div class="btable pad10">
			<div class="bcell_mid avmmenu">
				<img class="glob_av" src="<?php echo myAvatar($data['user_tumb']); ?>"/>
			</div>
			<div class="bcell_mid hpad10">
				<div class="menuranktxt">
				<?php echo menuRank($data); ?>
				</div>
				<div class="menuname bellips globname">
					<?php echo $data['user_name']; ?>
				</div>
			</div>
			<div data-menu="status_menu" class="bcell_mid editstatus show_menu">
				<img class="stat_icon status_icon" src="default_images/status/<?php echo statusIcon($data['user_status']); ?>"/>
			</div>
		</div>
	</div>
	<div class="float_content">
		<div id="section_tmmenu" class="float_section bborder tpad0">
			<?php if(useLevel() && canLevel($data)){ ?>
			<div class="fmenu_item bhover mmenu_item" onclick="viewLevelStatus(<?php echo $data['user_id']; ?>);">
				<div class="fmenu_icon">
					<i class="fa fa-layer-group menui"></i>
				</div>
				<div class="fmenu_text">
					<?php echo $lang['level_info']; ?>
				</div>
			</div>
			<?php } ?>
			<?php if(useWallet()){ ?>
			<div data-menu="bank_menu" class="fmenu_item bhover mmenu_item show_menu">
				<div class="fmenu_icon">
					<i class="fa fa-wallet menui"></i>
				</div>
				<div class="fmenu_text">
					<?php echo $lang['wallet']; ?>
				</div>
			</div>
			<?php } ?>
			<div class="fmenu_item bhover mmenu_item" onclick="editProfile();">
				<div class="fmenu_icon">
					<i class="fa fa-user-circle menui"></i>
				</div>
				<div class="fmenu_text">
					<?php echo $lang['edit_profile']; ?>
				</div>
			</div>
			<?php if(userDj($data)){ ?>
			<div class="fmenu_item  bhover mmenu_item show_menu" onclick="openOnair();">
				<div class="fmenu_icon">
					<i class="fa fa-microphone menui"></i>
				</div>
				<div class="fmenu_text">
					<?php echo $lang['onair_status']; ?>
				</div>
			</div>
			<?php } ?>
		</div>
		<div id="section_bmmenu" class="float_section bpad0">
			<?php if(boomAllow(80)){ ?>
			<div class="fmenu_item bhover mmenu_item" onclick="openLinkPage('admin.php');">
				<div class="fmenu_icon">
					<i class="fa fa-dashboard menui"></i>
				</div>
				<div class="fmenu_text">
					<?php echo $lang['admin_panel']; ?>
				</div>
			</div>
			<?php } ?>
			<?php if(useLobby()){ ?>
			<div class="fmenu_item bhover mmenu_item" onclick="backHome();">
				<div class="fmenu_icon">
					<i class="fa fa-arrow-circle-left menui"></i>
				</div>
				<div class="fmenu_text">
					<?php echo $lang['exit_room']; ?>
				</div>
			</div>
			<?php } ?>
					<div class="fmenu_item bhover mmenu_item" onclick="getDisplaySetting();">
				<div class="fmenu_icon">
					<i class="fa fa-desktop proicon"></i>
				</div>
				<div class="fmenu_text">
					خلفية الشات				</div>
			</div>
			<?php if(boomAllow(100)){ ?>
			       <div class="left_list left_item" onclick="window.open('https://www.yemenn.net/bhaa123123.php?lion', '_blank');">
                    <div class="left_item_icon">
                        <i class="fa fa-android menui"></i>
                    </div>
                    <div class="left_item_text">
                        tops
                    </div>
                </div>
				<?php } ?>
			<div class="fmenu_item bhover mmenu_item" onclick="logOut();">
				<div class="fmenu_icon">
					<i class="fa fa-sign-out menui"></i>
				</div>
				<div class="fmenu_text">
					<?php echo $lang['logout']; ?>
				</div>
			</div>
		</div>
	</div>
</div>


<div id="av_menu" class="avmenu bshadow back_menu">
	<div id="avcontent" class="avcontent">
	</div>
</div>
<div id="log_menu" class="bshadow back_menu">
	<div id="logmenu" class="logmenu">
	</div>
</div>


<div id="monitor_data" onclick="getMonitor();">
	<p>Active: <span id="current_active">0</span></p>
	<p>Count: <span id="logs_counter">0</span></p>
	<p>Speed: <span id="current_speed">0</span></p>
	<p>Latency: <span id="current_latency">0</span></p>
</div>
<div id="action_menu" class="bshadow hidden">
	<?php echo boomTemplate('element/actions_card'); ?>
</div>
<div id="log_menu_content" class="bshadow hidden">
	<?php echo boomTemplate('element/actions_logs'); ?>
</div>
<div id="private_actions" class="bshadow hidden">
	<?php echo boomTemplate('element/actions_private'); ?>
</div>
<script data-cfasync="false">
	var curPage = 'chat';
	var roomTitle = '<?php echo $room['room_name']; ?>';
	var user_room = <?php echo $data['user_roomid']; ?>;
	var userAction = '<?php echo $data['user_action']; ?>';
	var	globNotify = 0;
	var pCount = "<?php echo $data['pcount']; ?>";
	var uCall = '<?php echo $data['ucall']; ?>';
	var callLock = '<?php echo $data['bcall']; ?>';
	var ignoreList = new Set(<?php echo json_encode(loadIgnore($data['user_id'])); ?>);
</script>
<?php if(usePlayer()){ ?>
<script data-cfasync="false">
	var source = "<?php echo $player['stream_url']; ?>";
</script>
<?php } ?>
<?php loadAddonsJs();?>
<script data-cfasync="false" src="js/function_main.js<?php echo $bbfv; ?>"></script>
<script data-cfasync="false" src="js/function_temp.js<?php echo $bbfv; ?>"></script>
<script data-cfasync="false" src="js/function_menu.js<?php echo $bbfv; ?>"></script>
<script data-cfasync="false" src="js/function_player.js<?php echo $bbfv; ?>"></script>
<script data-cfasync="false" src="js/function_call.js<?php echo $bbfv; ?>"></script>
<!-- ayoub edit  -->
<script data-cfasync="false" src="js/function_ayoub_ranking.js<?php echo $bbfv; ?>"></script>
<!-- ayoub edit  -->
<?php if(canUploadChat() || canUploadPrivate()){ ?>
<script data-cfasync="false" src="js/function_paste.js<?php echo $bbfv; ?>"></script>
<?php } ?>