@import url(https://fonts.googleapis.com/css?family=Noto+Naskh+Arabic+UI);
@import url(https://fonts.googleapis.com/css?family=Noto+Kufi+Arabic);

body {
  font-family:
    noto kufi arabic,
    sans-serif,
    trebuchet ms,
    lucida grande,
    lucida sans unicode,
    arial,
    helvetica,
    sans-serif;
  line-height: 1.2;
}
@media (min-width: 300px) {
  body {
    font-family:
      sans-serif,
      trebuchet ms,
      lucida grande,
      lucida sans unicode,
      arial,
      helvetica,
      sans-serif;
  }
  .chat_message {
    font-family:
      HelveticaNeue,
      noto naskh arabic ui,
      Arial,
      sans-serif;
    font-size: 15px;
  }
}
@media (min-width: 600px) {
  body {
    font-family:
      noto kufi arabic,
      sans-serif,
      trebuchet ms,
      lucida grande,
      lucida sans unicode,
      arial,
      helvetica,
      sans-serif;
  }
  .chat_message {
    font-family:
      HelveticaNeue,
      noto kufi arabic,
      Arial,
      sans-serif;
  }
  .user_item_data,
  .user_item_name {
    line-height: 1;
  }
}

.post_avatar_frame {
  display: table-cell;
  vertical-align: center;
  width: 35px;
  position: relative;
}

.post_avatar img,
.post_avatar_frame .under {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
  cursor: pointer;
  position: relative;
  z-index: 1;
  left: 5px;
}

.onAndOffSwitch {
  display: table;
  padding: 2px;
  border-radius: 100px;
}

.system__join {
  background: rgba(107, 61, 85, 0.13);
}

.system__join .chat_system {
  color: red;
  font-weight: bold;
  font-size: 15px;
}

.grad_small_border {
  border-radius: 1000px;
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user_item_frame_avatar_new {
  display: table-cell;
  vertical-align: middle;
  width: 48px;
  height: 48px;
  position: relative;
}

.user_item_frame_inner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
  cursor: pointer;
}

.ul_fr_bg {
  width: 46px;
  top: 0px;
}

.overlist {
  position: absolute;
  z-index: 1;
  left: 0;
}

.under {
  position: absolute;
}

.ul_fr_av {
  left: 5px;
  top: 5px;
}

.grad_bigger_border {
  border-radius: 1000px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ranks colors */
.orange_ico {
  color: #ff6600;
}

.red_ico {
  color: rgb(211, 0, 0);
}

.yellow_ico {
  color: rgb(233, 233, 10);
}

.gray_ico {
  color: gray;
}

.white_ico {
  color: #ccc;
}

.blue_ico {
  color: rgb(25, 25, 184);
}

.brown_ico {
  color: #c6381c;
}

.wbrown_ico {
  color: #c5823e;
}

.bbrown_ico {
  color: #cc0033;
}

.Mcolor_ico {
  color: #9700ff;
}

.gold_ico {
  color: gold;
}

.ggold_ico {
  color: #ff9d00;
}

.bblue_ico {
  color: #05acd8;
}

.bred_ico {
  color: #fa0202;
}

.bgreen_ico {
  color: #00dfb7;
}

.bhelp_ico {
  color: #a97f70;
}

.bhelp2_ico {
  color: #708fa9;
}

.Mcolor_ico {
  color: #b43aff;
}

.zcolor_ico {
  color: #3498db;
}

.Arabic1 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/1.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic2 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/2.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic3 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/3.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic4 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/4.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic5 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/5.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic6 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/6.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic7 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/7.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic8 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/8.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic9 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/9.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic10 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/10.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic11 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/11.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic12 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/12.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic13 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/13.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.bgArb13 {
  background-image: url(../default_images/lens/13.gif);
}

.Arabic14 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/14.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic15 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/15.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic16 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/16.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic17 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/17.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic18 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/18.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic19 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/19.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic20 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/20.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic21 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/21.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic22 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/22.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic23 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/23.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic24 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/24.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic25 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/25.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic26 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/26.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic27 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/27.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic28 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/28.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic29 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/29.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic30 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/30.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic31 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/31.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic32 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/32.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic33 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/33.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic34 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/34.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic35 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/35.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic36 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/36.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic37 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/37.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic38 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/38.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic39 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/39.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic40 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/40.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic41 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/41.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic42 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/42.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic43 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/43.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic44 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/44.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic45 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/45.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic46 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/46.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic47 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/47.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic48 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/48.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic49 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/49.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic50 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/50.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic51 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/51.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic52 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/52.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic53 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/53.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic54 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/54.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic55 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/55.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic56 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/56.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic57 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/57.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic58 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/58.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic59 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/59.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic60 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/60.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic61 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/61.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic62 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/62.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic63 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/63.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic64 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/64.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic65 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/65.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic66 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/66.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic67 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/67.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic68 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/68.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

.Arabic69 {
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  font-family: sans-serif;
  background-image: url(../default_images/lens/69.gif);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}

/* profile color*/

.prograd1,
.pgrad1 {
  background: linear-gradient(to top, #f33, #800000) !important;
}

.prograd2,
.pgrad2 {
  background: linear-gradient(to top, #f63, #4d1300) !important;
}

.prograd3,
.pgrad3 {
  background: linear-gradient(to top, #f93, #4d2600) !important;
}

.prograd4,
.pgrad4 {
  background: linear-gradient(to top, #fc3, #806000) !important;
}

.prograd5,
.pgrad5 {
  background: linear-gradient(to top, #cc0, #4d4d00) !important;
}

.prograd6,
.pgrad6 {
  background: linear-gradient(to top, #9c0, #394d00) !important;
}

.prograd7,
.pgrad7 {
  background: linear-gradient(to top, #59b300, #264d00) !important;
}

.prograd8,
.pgrad8 {
  background: linear-gradient(to top, #829356, #2b301c) !important;
}

.prograd9,
.pgrad9 {
  background: linear-gradient(to top, #008000, #001a00) !important;
}

.prograd10,
.pgrad10 {
  background: linear-gradient(to top, #00e639, #00330d) !important;
}

.prograd11,
.pgrad11 {
  background: linear-gradient(to top, #00e673, #063) !important;
}

.prograd12,
.pgrad12 {
  background: linear-gradient(to top, #00e6ac, #004d39) !important;
}

.prograd13,
.pgrad13 {
  background: linear-gradient(to top, #0cc, #004d4d) !important;
}

.prograd14,
.pgrad14 {
  background: linear-gradient(to top, #03add8, #013d4b) !important;
}

.prograd15,
.pgrad15 {
  background: linear-gradient(to top, #36f, #002080) !important;
}

.prograd16,
.pgrad16 {
  background: linear-gradient(to top, #107896, #073845) !important;
}

.prograd17,
.pgrad17 {
  background: linear-gradient(to top, #004d99, #66b3ff) !important;
}

.prograd18,
.pgrad18 {
  background: linear-gradient(to top, #63f, #c6b3ff) !important;
}

.prograd19,
.pgrad19 {
  background: linear-gradient(to top, #93f, #d9b3ff) !important;
}

.prograd20,
.pgrad20 {
  background: linear-gradient(to top, #c3f, #ecb3ff) !important;
}

.prograd21,
.pgrad21 {
  background: linear-gradient(to top, #f3f, #ffb3ff) !important;
}

.prograd22,
.pgrad22 {
  background: linear-gradient(to top, #f3c, #ff99e6) !important;
}

.prograd23,
.pgrad23 {
  background: linear-gradient(to top, #f39, #ffb3d9) !important;
}

.prograd24,
.pgrad24 {
  background: linear-gradient(to top, #f36, #ffb3c6) !important;
}

.prograd25,
.pgrad25 {
  background: linear-gradient(to top, #40e0d0, #ff8c00, #ff0080) !important;
}

.prograd26,
.pgrad26 {
  background: linear-gradient(to top, #11998e, #38ef7d) !important;
}

.prograd27,
.pgrad27 {
  background: linear-gradient(to top, #108dc7, #ef8e38) !important;
}

.prograd28,
.pgrad28 {
  background: linear-gradient(to top, #fc5c7d, #6a82fb) !important;
}

.prograd29,
.pgrad29 {
  background: linear-gradient(to top, #fc466b, #3f5efb) !important;
}

.prograd30,
.pgrad30 {
  background: linear-gradient(to top, #c94b4b, #4b134f) !important;
}

.prograd31,
.pgrad31 {
  background: linear-gradient(to top, #00f260, #0575e6) !important;
}

.prograd32,
.pgrad32 {
  background: linear-gradient(to top, #fc4a1a, #f7b733) !important;
}

.prograd33,
.pgrad33 {
  background: linear-gradient(to top, #22c1c3, #fdbb2d) !important;
}

.prograd34,
.pgrad34 {
  background: linear-gradient(to top, #7f00ff, #e100ff) !important;
}

.prograd35,
.pgrad35 {
  background: linear-gradient(to top, #67b26f, #4ca2cd) !important;
}

.prograd36,
.pgrad36 {
  background: linear-gradient(to top, #ee0979, #ff6a00) !important;
}

.prograd37,
.pgrad37 {
  background: linear-gradient(to top, #00c3ff, #ffff1c) !important;
}

.prograd38,
.pgrad38 {
  background: linear-gradient(to top, #fc00ff, #00dbde) !important;
}

.prograd39,
.pgrad39 {
  background: linear-gradient(to top, #833ab4, #fd1d1d, #fcb045) !important;
}

.prograd40,
.pgrad40 {
  background: linear-gradient(to top, #43cea2, #185a9d) !important;
}

.prograd41,
.pgrad41 {
  background: linear-gradient(to top, #bdc3c7, #2c3e50) !important;
}

.prograd42,
.pgrad42 {
  background: linear-gradient(to top, #373b44, #4286f4) !important;
}

.prograd43,
.pgrad43 {
  background: linear-gradient(to top, #2980b9, #6dd5fa, #fff) !important;
}

.prograd44,
.pgrad44 {
  background: linear-gradient(to top, #f09, #493240) !important;
}

.prograd45,
.pgrad45 {
  background: linear-gradient(to top, #f953c6, #b91d73) !important;
}

.prograd46,
.pgrad46 {
  background: linear-gradient(to left, #c31432, #240b36) !important;
}

.prograd47,
.pgrad47 {
  background: linear-gradient(to top, #dd3e54, #6be585) !important;
}

.prograd48,
.pgrad48 {
  background: linear-gradient(to top, #8360c3, #2ebf91) !important;
}

.prograd49,
.pgrad49 {
  background: linear-gradient(to top, #544a7d, #ffd452) !important;
}

.prograd50,
.pgrad50 {
  background: linear-gradient(to top, #009fff, #ec2f4b) !important;
}

.prograd51,
.pgrad51 {
  background: linear-gradient(to top, #59c173, #a17fe0, #5d26c1) !important;
}

.prograd52,
.pgrad52 {
  background: linear-gradient(to top, #005aa7, #fffde4) !important;
}

.prograd53,
.pgrad53 {
  background: linear-gradient(to top, #da4453, #89216b) !important;
}

.prograd54,
.pgrad54 {
  background: linear-gradient(to top, #ad5389, #3c1053) !important;
}

.prograd55,
.pgrad55 {
  background: linear-gradient(to top, #a8c0ff, #3f2b96) !important;
}

.prograd56,
.pgrad56 {
  background: linear-gradient(to top, #333, #dd1818) !important;
}

.prograd57,
.pgrad57 {
  background: linear-gradient(to top, #108dc7, #ef8e38) !important;
}

.prograd58,
.pgrad58 {
  background: linear-gradient(to top, #23074d, #cc5333) !important;
}

.prograd59,
.pgrad59 {
  background: linear-gradient(to top, #fffbd5, #b20a2c) !important;
}

.prograd60,
.pgrad60 {
  background: linear-gradient(to top, #0f0c29, #302b63, #24243e) !important;
}

.prograd61,
.pgrad61 {
  background: linear-gradient(to top, #800080, #ffc0cb) !important;
}

.prograd62,
.pgrad62 {
  background: linear-gradient(to top, #00f260, #0575e6) !important;
}

.prograd63,
.pgrad63 {
  background: linear-gradient(
    to top,
    #667db6,
    #0082c8,
    #ec38bc,
    #fdeff9
  ) !important;
}

.prograd64,
.pgrad64 {
  background: linear-gradient(to top, #e1eec3, #f05053) !important;
}

.prograd65,
.pgrad65 {
  background: linear-gradient(
    to top,
    #03001e,
    #7303c0,
    #ec38bc,
    #fdeff9
  ) !important;
}

.prograd66,
.pgrad66 {
  background: linear-gradient(to top, #1a2a6c, #b21f1f, #fdbb2d) !important;
}

.prograd67,
.pgrad67 {
  background: linear-gradient(to top, #000, #0f9b0f) !important;
}

.prograd68,
.pgrad68 {
  background: linear-gradient(to top, #36d1dc, #5b86e5) !important;
}

.prograd69,
.pgrad69 {
  background: linear-gradient(to top, #3a1c71, #d76d77, #ffaf7b) !important;
}

.prograd70,
.pgrad70 {
  background: linear-gradient(to top, #283c86, #45a247) !important;
}

.prograd71,
.pgrad71 {
  background: linear-gradient(to top, #ef3b36, #fff) !important;
}

.prograd72,
.pgrad72 {
  background: linear-gradient(to top, #159957, #155799) !important;
}

.prograd73,
.pgrad73 {
  background: linear-gradient(to top, #000046, #1cb5e0) !important;
}

.prograd74,
.pgrad74 {
  background: linear-gradient(to top, #56ccf2, #2f80ed) !important;
}

.prograd75,
.pgrad75 {
  background: linear-gradient(to top, #eb5757, #000) !important;
}

.prograd76,
.pgrad76 {
  background: linear-gradient(to top, #20002c, #cbb4d4) !important;
}

.prograd77,
.pgrad77 {
  background: linear-gradient(to top, #34e89e, #0f3443) !important;
}

.prograd78,
.pgrad78 {
  background: linear-gradient(to top, #bdc3c7, #2c3e50) !important;
}

.prograd79,
.pgrad79 {
  background: linear-gradient(to top, #a80077, #6f0) !important;
}

.prograd80,
.pgrad80 {
  background: linear-gradient(to top, #000, #656565) !important;
}

.shgrad1,
.shgrad1 {
  box-shadow: #422f99 0 0 20px !important;
  border: 1px solid #422f99 !important;
}

.shgrad2,
.shgrad2 {
  box-shadow: #a80077 0 0 20px !important;
  border: 1px solid #a80077 !important;
}

.shgrad3,
.shgrad3 {
  box-shadow: #000 0 0 20px !important;
  border: 1px solid #000 !important;
}

.shgrad4,
.shgrad4 {
  box-shadow: #4d3e3e 0 0 20px !important;
  border: 1px solid #4d3e3e !important;
}

.shgrad5,
.shgrad5 {
  box-shadow: #142850 0 0 20px !important;
  border: 1px solid #142850 !important;
}

.shgrad6,
.shgrad6 {
  box-shadow: #00909e 0 0 20px !important;
  border: 1px solid #00909e !important;
}

.shgrad7,
.shgrad7 {
  box-shadow: #dae1e7 0 0 20px !important;
  border: 1px solid #dae1e7 !important;
}

.shgrad8,
.shgrad8 {
  box-shadow: #ffe0ac 0 0 20px !important;
  border: 1px solid #ffe0ac !important;
}

.shgrad9,
.shgrad9 {
  box-shadow: #888 0 0 20px !important;
  border: 1px solid #888 !important;
}

.shgrad10,
.shgrad10 {
  box-shadow: #120136 0 0 20px !important;
  border: 1px solid #120136 !important;
}

.shgrad11,
.shgrad11 {
  box-shadow: #f6f578 0 0 20px !important;
  border: 1px solid #f6f578 !important;
}

.shgrad12,
.shgrad12 {
  box-shadow: #862a5c 0 0 20px !important;
  border: 1px solid #862a5c !important;
}

.shgrad13,
.shgrad13 {
  box-shadow: #eaac9d 0 0 20px !important;
  border: 1px solid #eaac9d !important;
}

.shgrad14,
.shgrad14 {
  box-shadow: #06623b 0 0 20px !important;
  border: 1px solid #06623b !important;
}

.shgrad15,
.shgrad15 {
  box-shadow: #f79071 0 0 20px !important;
  border: 1px solid #f79071 !important;
}

.shgrad16,
.shgrad16 {
  box-shadow: #f6acc8 0 0 20px !important;
  border: 1px solid #f6acc8 !important;
}

.shgrad17,
.shgrad17 {
  box-shadow: #af8baf 0 0 20px !important;
  border: 1px solid #af8baf !important;
}

.shgrad18,
.shgrad18 {
  box-shadow: #584153 0 0 20px !important;
  border: 1px solid #584153 !important;
}

.shgrad19,
.shgrad19 {
  box-shadow: #c1a57b 0 0 20px !important;
  border: 1px solid #c1a57b !important;
}

.shgrad20,
.shgrad20 {
  box-shadow: #2c003e 0 0 20px !important;
  border: 1px solid #2c003e !important;
}

.shgrad21,
.shgrad21 {
  box-shadow: #43d8c9 0 0 20px !important;
  border: 1px solid #43d8c9 !important;
}

.shgrad22,
.shgrad22 {
  box-shadow: #95389e 0 0 20px !important;
  border: 1px solid #95389e !important;
}

.shgrad23,
.shgrad23 {
  box-shadow: #0779e4 0 0 20px !important;
  border: 1px solid #0779e4 !important;
}

.shgrad24,
.shgrad24 {
  box-shadow: #d8345f 0 0 20px !important;
  border: 1px solid #d8345f !important;
}

.shgrad25,
.shgrad25 {
  box-shadow: #c70039 0 0 20px !important;
  border: 1px solid #c70039 !important;
}

.shgrad26,
.shgrad26 {
  box-shadow: #ff5733 0 0 20px !important;
  border: 1px solid #ff5733 !important;
}

.shgrad27,
.shgrad27 {
  box-shadow: #8566aa 0 0 20px !important;
  border: 1px solid #8566aa !important;
}

.shgrad28,
.shgrad28 {
  box-shadow: #6983aa 0 0 20px !important;
  border: 1px solid #6983aa !important;
}

.shgrad29,
.shgrad29 {
  box-shadow: #f8e1f4 0 0 20px !important;
  border: 1px solid #f8e1f4 !important;
}

.shgrad30,
.shgrad30 {
  box-shadow: #97e5ef 0 0 20px !important;
  border: 1px solid #97e5ef !important;
}

.shgrad31,
.shgrad31 {
  box-shadow: #b9ebcc 0 0 20px !important;
  border: 1px solid #b9ebcc !important;
}

.shgrad32,
.shgrad32 {
  box-shadow: #5a3f11 0 0 20px !important;
  border: 1px solid #5a3f11 !important;
}

.shgrad33,
.shgrad33 {
  box-shadow: #9c5518 0 0 20px !important;
  border: 1px solid #9c5518 !important;
}

.shgrad34,
.shgrad34 {
  box-shadow: #ffb385 0 0 20px !important;
  border: 1px solid #ffb385 !important;
}

.shgrad35,
.shgrad35 {
  box-shadow: #698474 0 0 20px !important;
  border: 1px solid #698474 !important;
}

.shgrad36,
.shgrad36 {
  box-shadow: #de7119 0 0 20px !important;
  border: 1px solid #de7119 !important;
}

.shgrad37,
.shgrad37 {
  box-shadow: #204051 0 0 20px !important;
  border: 1px solid #204051 !important;
}

.shgrad38,
.shgrad38 {
  box-shadow: #3b6978 0 0 20px !important;
  border: 1px solid #3b6978 !important;
}

.shgrad39,
.shgrad39 {
  box-shadow: #f76a8c 0 0 20px !important;
  border: 1px solid #f76a8c !important;
}

.shgrad40,
.shgrad40 {
  box-shadow: #fbcffc 0 0 20px !important;
  border: 1px solid #fbcffc !important;
}

.shgrad41,
.shgrad40 {
  box-shadow: #be79df 0 0 20px !important;
  border: 1px solid #be79df !important;
}

.shgrad42,
.shgrad40 {
  box-shadow: #cff1ef 0 0 20px !important;
  border: 1px solid #cff1ef !important;
}

.shgrad43,
.shgrad40 {
  box-shadow: #ffd1bd 0 0 20px !important;
  border: 1px solid #ffd1bd !important;
}

.shgrad44,
.shgrad40 {
  box-shadow: #9dc6a7 0 0 20px !important;
  border: 1px solid #9dc6a7 !important;
}

.shgrad45,
.shgrad40 {
  box-shadow: #323232 0 0 20px !important;
  border: 1px solid #323232 !important;
}

.vertical-menu-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid #f0f0f0;
  direction: rtl;
}

.vertical-menu-item:hover {
  background: #f8f9ff;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #e0e0ff;
}

.vertical-menu-item i {
  font-size: 20px;
  width: 32px;
  text-align: center;
  color: #5a67d8;
  margin-left: 14px;
}

.vertical-menu-item span {
  font-size: 15px;
  font-weight: 500;
  color: #2d3748;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* خاص بعنصر البانر (مع زر الحذف) */
.banner-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.banner-row .vertical-menu-item {
  flex: 1;
  margin-bottom: 0;
}

/*  */
/* ===== REACTIONS SYSTEM - Compact Style ===== */

/* ✅ المسج wrapper */
.chat_message {
  position: relative;
}

/* شريط الإيموشنات - تحت المسج على الشمال مع خلفية */
.reactions-bar {
  display: inline-flex;
  gap: 4px;
  margin-top: 3px;
  align-items: center;
}

/* ✅ مجموعة الإيموشنات - مع خلفية واضحة */
.reactions-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  border-radius: 12px;
  background: #e8f0fe;
  border: 1px solid #d3e3fd;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.reactions-group:hover {
  background: #d3e3fd;
  transform: scale(1.03);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

/* ✅ الإيموشن اللي انت عملته - خلفية مميزة */
.reactions-group.has-my-reaction {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.reactions-group.has-my-reaction:hover {
  background: linear-gradient(135deg, #5568d3 0%, #633a8c 100%);
  transform: scale(1.05);
}

/* ✅ الإيموشنات جوا المجموعة اللي انت عملتها */
.reactions-group.has-my-reaction .reaction-emoji {
  filter: brightness(1.2);
}

/* الإيموشن */
.reaction-emoji {
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  transition: all 0.2s;
  padding: 3px 4px;
  border-radius: 8px;
}

/* ✅ الإيموشن اللي انت عملته - خلفية ناعمة */
.reaction-emoji.my-emoji {
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 0 0 2px rgba(102, 126, 234, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

/* ✅ العدد - مخفي */
.total-reaction-count {
  display: none;
}

/* لو عايز تظهر العدد بس بشكل صغير جداً، استخدم ده بدل display: none */
/*
.total-reaction-count {
    color: #666;
    font-size: 9px;
    font-weight: 600;
    margin-right: 2px;
    opacity: 0.7;
}
*/

/* ✅ زرار + - مع خلفية واضحة */
.add-reaction-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #5f6368;
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;
  background: #f1f3f4;
  border: 1px solid #dadce0;
  font-weight: normal;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.add-reaction-icon:hover {
  background: #e8eaed;
  transform: scale(1.1);
  color: #202124;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ✅ قائمة الإيموشنات - تصميم حلو وهادي */
.emoji-picker {
  position: fixed;
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  width: auto;
  min-width: 340px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  z-index: 99998;
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
}

/* ✅ Animation فتح البوكس */
.emoji-picker.picker-opening {
  animation: pickerOpen 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ✅ Animation قفل البوكس */
.emoji-picker.picker-closing {
  animation: pickerClose 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ✅ لو البوكس فوق المسج */
.emoji-picker.picker-above::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid #ffffff;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

/* ✅ لو البوكس تحت المسج */
.emoji-picker.picker-below::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 8px solid #ffffff;
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
}

@keyframes pickerOpen {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes pickerClose {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* ✅ للموبايل - تصغير شوية */
@media (max-width: 480px) {
  .emoji-picker {
    min-width: 280px;
    padding: 12px;
    gap: 6px;
    grid-template-columns: repeat(6, 1fr);
  }
}

.emoji-option {
  font-size: 28px;
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid transparent;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.emoji-option:hover {
  background: rgba(240, 242, 245, 0.9);
  transform: scale(1.15);
  border-color: rgba(102, 126, 234, 0.2);
}

.emoji-option:active {
  transform: scale(0.95);
  background: rgba(230, 232, 235, 0.9);
}

/* ✅ الإيموشن اللي انت عامله في البوكس */
.emoji-option.emoji-selected {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  box-shadow:
    0 4px 12px rgba(102, 126, 234, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.emoji-option.emoji-selected:hover {
  background: linear-gradient(135deg, #5568d3 0%, #633a8c 100%);
  transform: scale(1.2);
  box-shadow:
    0 6px 16px rgba(102, 126, 234, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ✅ للموبايل - تصغير شوية */
@media (max-width: 480px) {
  .emoji-option {
    font-size: 24px;
    width: 40px;
    height: 40px;
    padding: 6px;
  }
}

/* ✅ نافذة المتفاعلين */
.reactions-modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: #fff;
  border-radius: 16px;
  width: 90%;
  max-width: 420px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  color: #212121;
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: #757575;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  line-height: 1;
  border-radius: 50%;
  transition: background 0.2s;
}

.modal-close:hover {
  background: #f5f5f5;
}

.modal-tabs {
  display: flex;
  padding: 12px 16px;
  gap: 8px;
  border-bottom: 1px solid #f0f0f0;
  overflow-x: auto;
}

.modal-tab {
  background: transparent;
  border: none;
  color: #757575;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 20px;
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.2s;
  font-weight: 500;
}

.modal-tab:hover {
  background: #f5f5f5;
}

.modal-tab.active {
  background: #e3f2fd;
  color: #1976d2;
  font-weight: 600;
}

.modal-body {
  padding: 12px 20px;
  overflow-y: auto;
  flex: 1;
}

.reaction-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.reaction-user:last-child {
  border-bottom: none;
}

.user-avatar-small {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.user-name-small {
  color: #212121;
  font-size: 15px;
  font-weight: 500;
}

.user-reaction-emoji {
  font-size: 24px;
}

/* ✅ Animation */
@keyframes reactionPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.reaction-pulse {
  animation: reactionPop 0.3s ease-out;
}

.reactions-bar.new-reaction {
  animation: reactionPop 0.3s ease-out;
}

/* ✅ للموبايل - أصغر شوية */
@media (max-width: 768px) {
  .emoji-picker {
    width: 260px;
    padding: 10px;
  }

  .emoji-option {
    font-size: 24px;
    width: 40px;
    height: 40px;
  }

  .modal-content {
    width: 95%;
    max-height: 90vh;
  }

  .reactions-group {
    padding: 1px 3px;
  }

  .reaction-emoji {
    font-size: 15px;
  }

  .add-reaction-icon {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
}

/* ✅ للثيم الداكن - مع خلفية واضحة */
.dark-mode .reactions-group,
body.dark-theme .reactions-group {
  background: #2d3748;
  border-color: #4a5568;
}

.dark-mode .reactions-group:hover,
body.dark-theme .reactions-group:hover {
  background: #374151;
}

.dark-mode .reactions-group.has-my-reaction,
body.dark-theme .reactions-group.has-my-reaction {
  background: #4c51bf;
  border-color: #667eea;
}

.dark-mode .add-reaction-icon,
body.dark-theme .add-reaction-icon {
  background: #374151;
  border-color: #4a5568;
  color: #9ca3af;
}

.dark-mode .add-reaction-icon:hover,
body.dark-theme .add-reaction-icon:hover {
  background: #4b5563;
  color: #e5e7eb;
}

.dark-mode .emoji-picker,
body.dark-theme .emoji-picker {
  background: #2a2a2a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dark-mode .emoji-option:hover,
body.dark-theme .emoji-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .modal-content,
body.dark-theme .modal-content {
  background: #1f1f1f;
}

.dark-mode .modal-header,
body.dark-theme .modal-header {
  border-color: #333;
}

.dark-mode .modal-title,
body.dark-theme .modal-title {
  color: #fff;
}

.dark-mode .modal-close,
body.dark-theme .modal-close {
  color: #999;
}

.dark-mode .modal-close:hover,
body.dark-theme .modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .modal-tabs,
body.dark-theme .modal-tabs {
  border-color: #333;
}

.dark-mode .modal-tab,
body.dark-theme .modal-tab {
  color: #999;
}

.dark-mode .modal-tab:hover,
body.dark-theme .modal-tab:hover {
  background: rgba(255, 255, 255, 0.05);
}

.dark-mode .modal-tab.active,
body.dark-theme .modal-tab.active {
  background: rgba(102, 126, 234, 0.25);
  color: #667eea;
}

.dark-mode .reaction-user,
body.dark-theme .reaction-user {
  border-color: #333;
}

.dark-mode .user-name-small,
body.dark-theme .user-name-small {
  color: #fff;
}

/* ✅ قائمة الإيموشنات الأفقية في log_menu */

.log_reactions_menu {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  background: linear-gradient(145deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.log_reactions_menu::-webkit-scrollbar {
  height: 4px;
}

.log_reactions_menu::-webkit-scrollbar-track {
  background: transparent;
}

.log_reactions_menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.log_reactions_menu::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ✅ الإيموشن في القائمة */
.log_reaction_option {
  font-size: 24px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid transparent;
  flex-shrink: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.log_reaction_option:hover {
  background: rgba(240, 242, 245, 0.9);
  transform: scale(1.1);
  border-color: rgba(102, 126, 234, 0.2);
}

.log_reaction_option:active {
  transform: scale(0.95);
  background: rgba(230, 232, 235, 0.9);
}

/* ✅ الإيموشن اللي انت عامله */
.log_reaction_option.reaction-selected {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  box-shadow:
    0 3px 10px rgba(102, 126, 234, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.log_reaction_option.reaction-selected:hover {
  background: linear-gradient(135deg, #5568d3 0%, #633a8c 100%);
  transform: scale(1.15);
}

/* ✅ للموبايل */
@media (max-width: 480px) {
  .log_reactions_menu {
    padding: 6px 8px;
    gap: 4px;
  }

  .log_reaction_option {
    font-size: 22px;
    min-width: 36px;
    height: 36px;
    padding: 4px 6px;
  }
}

.chat_frame_avatar {
  display: inline-block;
  position: relative;
  vertical-align: top;
  width: 33px;
}

.ch_fr_av {
  left: 0px;
  top: 4px;
}

.ch_fr_bg {
  width: 38px;
  height: 38px;
  top: 0px;
}

.chat_frame_avatar_inner2 {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.over {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
}

.over2 {
  position: absolute;
  z-index: 1;
  left: -4px;
  pointer-events: none;
}

.gift_message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 8px 12px;
  border-radius: 12px;
  animation: giftPop 0.3s ease;
}

.gift_success {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15),
    rgba(255, 236, 128, 0.15)
  );
  border: 1px solid rgba(255, 215, 0, 0.5);
}

.gift_error {
  background: linear-gradient(
    135deg,
    rgba(255, 99, 71, 0.1),
    rgba(255, 99, 71, 0.15)
  );
  border: 1px solid rgba(255, 99, 71, 0.5);
}

.gift_icon img {
  width: 36px;
  height: 36px;
}

.gift_content {
  flex: 1;
}

.gift_title {
  font-weight: bold;
  font-size: 13px;
  margin: 0 0 4px 0;
  color: var(--text-color);
}

.gift_text {
  font-size: 12px;
  margin: 0;
  color: var(--sub-text);
}

@keyframes giftPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.socket_loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  /* أقل سوادًا قليلاً */
  backdrop-filter: blur(3px);
  /* تأثير زجاجي خفيف (اختياري - يدعمه معظم المتصفحات الحديثة) */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.socket_loading_content {
  text-align: center;
  color: #fff;
  background: rgba(30, 30, 30, 0.85);
  padding: 24px 32px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  max-width: 80%;
  width: auto;
  min-width: 200px;
  backdrop-filter: blur(4px);
  /* يعزز تأثير الزجاج إذا دعم */
}

.socket_spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #4fc3f7;
  /* لون أزرق فاتح أنظف من الأبيض */
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  /* easing أكثر سلاسة */
  margin: 0 auto 18px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.socket_loading_content p {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #e0e0e0;
  /* أبيض ناعم بدل الأبيض الناصع */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.prview {
  color: #34b7f1;
}

/* ==========================================
           🎁 Room Gift Animation - تصميم متجاوب
           ========================================== */

.room_gift_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 15px;
  box-sizing: border-box;
}

.room_gift_container.gift_show {
  opacity: 1;
}

.room_gift_container.gift_hide {
  opacity: 0;
}

.room_gift_animation {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.95),
    rgba(255, 165, 0, 0.95)
  );
  border-radius: 20px;
  padding: 20px 25px;
  text-align: center;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.3),
    0 0 60px rgba(255, 215, 0, 0.5);
  animation:
    giftPulse 0.5s ease-out,
    giftFloat 2s ease-in-out infinite;
  border: 3px solid rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 500px;
  min-width: 280px;
  box-sizing: border-box;
}

@keyframes giftPulse {
  0% {
    transform: scale(0.5);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes giftFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* صورة الهدية في الأعلى */
.gift_image_anim {
  width: 100px;
  height: 100px;
  object-fit: contain;
  animation: giftBounce 1s ease infinite;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
  margin-bottom: 15px;
}

@keyframes giftBounce {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-10px) rotate(-5deg);
  }

  75% {
    transform: translateY(-10px) rotate(5deg);
  }
}

/* النص في سطر واحد */
.gift_text_line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  direction: rtl;
  font-size: 16px;
  line-height: 1.4;
  width: 100%;
}

.gift_sender_section {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sender_avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid #4a90e2;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.gift_sender_name {
  font-weight: bold;
  color: #8b4513;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.3);
  padding: 4px 12px;
  border-radius: 10px;
  border: 2px solid rgba(139, 69, 19, 0.3);
}

.gift_action_text {
  color: #654321;
  font-weight: 500;
}

.gift_title_anim {
  font-weight: bold;
  color: #8b0000;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.4);
  padding: 4px 12px;
  border-radius: 10px;
  border: 2px solid rgba(139, 0, 0, 0.3);
}

.gift_to_text {
  color: #654321;
  font-weight: 500;
}

.gift_target_section {
  display: flex;
  align-items: center;
  gap: 6px;
}

.target_avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid #ff6b6b;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.gift_target_name {
  font-weight: bold;
  color: #8b4513;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.3);
  padding: 4px 10px;
  border-radius: 8px;
  border: 2px solid rgba(139, 69, 19, 0.3);
}

/* ✨ Sparkle Effect */
.room_gift_animation::before,
.room_gift_animation::after {
  content: "✨";
  position: absolute;
  font-size: 16px;
  animation: sparkle 1s ease infinite;
}

.room_gift_animation::before {
  top: -8px;
  left: 10px;
}

.room_gift_animation::after {
  bottom: -8px;
  right: 10px;
  animation-delay: 0.5s;
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

/* ========== STORY SYSTEM ========== */
:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --accent: #ec4899;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --dark: #0f172a;
  --dark-card: #1e293b;
  --dark-border: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --gradient-snap: linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
  --gradient-seen: linear-gradient(135deg, #475569, #64748b);
}

/* Story Tray Container */
.story-tray-container {
  line-height: 10px;
  width: 250px;
  background: var(--dark-card);
  border-radius: 20px;
  border: 1px solid var(--dark-border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.story-tray-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.story-tray-title i {
  color: var(--accent);
}

.story-tray {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 5px;
  scrollbar-width: thin;
  scrollbar-color: var(--dark-border) transparent;
}

.story-tray::-webkit-scrollbar {
  height: 6px;
}

.story-tray::-webkit-scrollbar-track {
  background: transparent;
}

.story-tray::-webkit-scrollbar-thumb {
  background: var(--dark-border);
  border-radius: 10px;
}

.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.story-item:hover {
  transform: scale(1.05);
}

.story-item:active {
  transform: scale(0.95);
}

.story-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.story-ring.unseen {
  background: var(--gradient-snap);
  animation: pulse-ring 2s ease-in-out infinite;
}

.story-ring.seen {
  background: var(--gradient-seen);
}

.story-ring.add-story {
  background: rgba(255, 255, 255, 0.1);
  border: 2px dashed var(--dark-border);
}

.story-ring.add-story::after {
  content: "+";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 20px;
  height: 20px;
  background: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  border: 3px solid var(--dark-card);
}

@keyframes pulse-ring {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(236, 72, 153, 0);
  }
}

.story-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--dark-card);
}

.story-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  max-width: 65px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* === SNAP VIEWER === */
.snap-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.snap-overlay.active {
  display: flex;
}

.snap-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.snap-bg-media {
  position: absolute;
  inset: -15%;
  background: #000 center/cover no-repeat;
  filter: blur(40px) saturate(1.2);
  transform: scale(1.2);
  opacity: 0.6;
  transition: background-image 0.3s ease;
}

.snap-bg-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.snap-card {
  position: relative;
  width: 100vw;
  height: 100%;
  max-width: 420px;
  max-height: 100dvh;
  background: transparent;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* منع القوائم الافتراضية والنسخ */
.snap-card,
.snap-media-wrap img,
.snap-media-wrap video,
.snap-text-media {
  -webkit-touch-callout: none;
  /* يمنع قائمة حفظ الصورة في iOS */
  -webkit-user-select: none;
  /* يمنع التحديد في Safari */
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* يمنع التحديد في كل المتصفحات */
  outline: none;
}

/* كلاس جديد سيتم إضافته بالجافا سكريبت لإخفاء العناصر */
.hide-ui .snap-header,
.hide-ui .snap-segments,
.hide-ui .snap-footer,
.hide-ui .snap-nav,
.hide-ui .snap-caption {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

@media (min-width: 700px) {
  .snap-card {
    width: min(420px, 95vw);
    height: min(94dvh, 850px);
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
  }
}

.snap-segments {
  position: relative;
  z-index: 12;
  display: flex;
  gap: 4px;
  padding: 16px 16px 4px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}

.snap-seg {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  overflow: hidden;
}

.snap-seg-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 10px;
  transition: width 0.1s linear;
}

.snap-header {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px) + 8px);
  right: 16px;
  left: 16px;
  z-index: 10;
  padding: 10px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 16px;
  direction: rtl;
}

.snap-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.snap-user-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.snap-user-meta {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.snap-user-name {
  font-weight: 800;
  font-size: 15px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.snap-user-time {
  font-size: 12px;
  opacity: 0.8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.snap-header-btns {
  display: flex;
  gap: 8px;
}

.snap-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.snap-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.snap-body {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.snap-body-blur {
  position: absolute;
  inset: 0;
  background: #000 center/cover no-repeat;
  filter: blur(30px);
  transform: scale(1.15);
  opacity: 0.7;
}

.snap-body-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.snap-media-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.snap-media-wrap img,
.snap-media-wrap video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.snap-text-media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.5;
  color: #fff;
  white-space: pre-wrap;
  word-break: break-word;
  direction: rtl;
}

.snap-text-media[data-bg="g1"] {
  background: linear-gradient(135deg, #25d366, #128c7e);
}

.snap-text-media[data-bg="g2"] {
  background: linear-gradient(135deg, #34b7f1, #0b5ed7);
}

.snap-text-media[data-bg="g3"] {
  background: linear-gradient(135deg, #ff7043, #d84315);
}

.snap-text-media[data-bg="g4"] {
  background: linear-gradient(135deg, #5c6bc0, #1a237e);
}

.snap-text-media[data-bg="g5"] {
  background: linear-gradient(135deg, #ec407a, #880e4f);
}

.snap-text-media[data-bg="g6"] {
  background: linear-gradient(135deg, #26a69a, #004d40);
}

.snap-text-media[data-bg="g7"] {
  background: linear-gradient(135deg, #ffca28, #f57f17);
}

.snap-text-media[data-bg="g8"] {
  background: linear-gradient(135deg, #78909c, #263238);
}

.snap-text-media[data-bg="g9"] {
  background: linear-gradient(135deg, #ab47bc, #4a148c);
}

.snap-text-media[data-bg="g10"] {
  background: linear-gradient(135deg, #66bb6a, #1b5e20);
}

.snap-text-media[data-bg="g11"] {
  background: linear-gradient(135deg, #29b6f6, #01579b);
}

.snap-text-media[data-bg="g12"] {
  background: linear-gradient(135deg, #ffa726, #e65100);
}

.snap-text-media[data-bg="g13"] {
  background: linear-gradient(135deg, #8d6e63, #3e2723);
}

.snap-text-media[data-bg="g14"] {
  background: linear-gradient(135deg, #d4e157, #827717);
}

.snap-text-media[data-bg="g15"] {
  background: linear-gradient(135deg, #26c6da, #006064);
}

.snap-text-media[data-bg="g16"] {
  background: linear-gradient(135deg, #ef5350, #b71c1c);
}

.snap-text-media[data-bg="g17"] {
  background: linear-gradient(135deg, #b0bec5, #37474f);
}

.snap-text-media[data-bg="g18"] {
  background: linear-gradient(135deg, #f06292, #ad1457);
}

/* التنقل - X على اليسار */
.snap-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 5;
}

.snap-nav:hover {
  opacity: 1;
}

.snap-prev {
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent);
}

.snap-next {
  right: 0;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.3), transparent);
}

.snap-caption {
  position: absolute;
  right: 16px;
  left: 16px;
  bottom: 90px;
  z-index: 6;
  padding: 12px 16px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  direction: rtl;
}

/* الفوتر - الإعجاب يمين، المشاهدات يسار */
.snap-footer {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 6;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  direction: rtl;
}

.snap-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.snap-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 25px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  direction: rtl;
}

.snap-action-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.snap-action-btn.reacted {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.snap-action-btn.reacted i {
  animation: react-pop 0.3s ease;
}

@keyframes react-pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

/* المشاهدات على اليسار */
.snap-views-btn {
  margin-left: auto;
}

/* لوحة التعليقات - ستايل المشاهدات */
.snap-comments-panel {
  display: none;
  position: absolute;
  right: 16px;
  left: 16px;
  bottom: 70px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 16px;
  padding: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10;

  /* التعديل هنا لضمان الارتفاع المناسب */
  max-height: 320px;
  flex-direction: column;
  direction: rtl;
}

.snap-comments-panel.active {
  display: flex;
  flex-direction: column;
}

.snap-comments-list {
  overflow-y: auto;
  /* تفعيل التمرير العمودي */
  max-height: 240px;
  /* هذا الارتفاع يظهر تقريباً 3 تعليقات */
  margin-bottom: 12px;
  padding-left: 5px;
  /* مسافة للسكرول بار */
}

.snap-comments-list::-webkit-scrollbar {
  width: 4px;
}

.snap-comments-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

/* تحسين ظهور اسم الشخص والتعليق */
.snap-comment-name {
  font-weight: 800;
  /* خط أسمك */
  font-size: 14px;
  margin-bottom: 2px;
  text-align: right;
  color: #ffffff;
  /* أبيض صريح للاسم */
}

.snap-comment-text {
  font-size: 13px;
  color: #e2e8f0;
  /* رمادي فاتح جداً مريح للعين */
  word-break: break-word;
  text-align: right;
  line-height: 1.4;
}

/* إضافة خلفية بسيطة لكل تعليق لزيادة التباين */
.snap-comment-item {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.05);
  direction: rtl;
  align-items: center;
  /* لضمان توسط العناصر رأسياً */
  justify-content: flex-start;
  /* البداية من اليمين */
}

.snap-comment-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.snap-comment-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.snap-comment-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.snap-comment-top-row {
  display: flex;
  justify-content: space-between;
  /* يدفع الاسم لليمين والوقت لليسار */
  align-items: center;
  width: 100%;
  margin-bottom: 2px;
}

.snap-comment-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  /* لون خافت للوقت */
  margin-right: auto;
  /* تأكيد الدفع لليسار */
}

.snap-comment-form {
  display: flex;
  gap: 10px;
  flex-direction: row-reverse;
}

.snap-comment-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}

.snap-comment-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
}

.snap-comment-input:focus {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.15);
}

.snap-comment-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  /* تغيير اللون للأبيض */
  color: #000000;
  /* الأيقونة سوداء */
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.snap-comment-send:hover {
  background: #f0f0f0;
  transform: scale(1.05);
}

/* جدول المشاهدات */
.snap-views-table {
  display: none;
  position: absolute;
  right: 16px;
  left: 16px;
  bottom: 70px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 16px;
  padding: 16px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 7;
  max-height: 300px;
  overflow-y: auto;
  direction: rtl;
}

.snap-views-table.active {
  display: block;
}

.views-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.views-table-header h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.views-table-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
}

.views-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* حاوية عنصر المشاهد الواحد */
.view-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* يوزع العناصر: اليمين في طرف واليسار في طرف */
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.3s;
}

.view-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* الجزء الأيمن (الصورة + الاسم) */
.view-user-details {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.view-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-left: 12px;
  /* مسافة بين الصورة والاسم (للتنسيق العربي) */
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.view-info {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.view-name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.view-time {
  color: #888;
  font-size: 11px;
  margin-top: 2px;
}

/* الجزء الأيسر (أيقونة الإعجاب) */
.view-reaction {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: auto;
  /* يضمن دفع العنصر لأقصى اليسار */
  padding-left: 5px;
}

.view-reaction i {
  color: #ff4757;
  /* لون القلب أحمر جذاب */
  font-size: 16px;
  filter: drop-shadow(0 0 5px rgba(255, 71, 87, 0.3));
  animation: heartBeat 1.2s infinite;
}

/* أنيميشن نبض خفيف للقلب */
@keyframes heartBeat {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 600px) {
  .story-ring {
    width: 55px;
    height: 55px;
  }

  .story-avatar {
    width: 49px;
    height: 49px;
  }

  .snap-text-media {
    font-size: 22px;
    padding: 20px;
  }

  .story-name {
    font-size: 10px;
  }
}
.story-ring.my-story-ring::after {
  content: "+";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 20px;
  height: 20px;
  background: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  border: 3px solid var(--dark-card);
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease;
}

.story-ring.my-story-ring::after:hover {
  transform: scale(1.15);
  background: #059669;
}
.footer_item {
  width: 50px;
}
#back_to_bottom {
  bottom: 5px;
  left: 35px;
  top: unset;
}
.submenu_item {
  line-height: 1.2;
}
.online_users_modal {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
}

.online_header {
  padding: 10px 14px;
  background: #fafafa;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.online_header_left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.online_header_left i {
  color: #6b7280;
  font-size: 16px;
}

.online_header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.online_close_btn {
  background: none;
  border: none;
  color: #9ca3af;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.online_close_btn:hover {
  background: #f3f4f6;
  color: #6b7280;
}

.online_stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 10px;
  background: #fafafa;
  border-bottom: 1px solid #e5e7eb;
}

.stat_card {
  background: white;
  padding: 6px 8px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #e5e7eb;
}

.stat_card i {
  font-size: 13px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #f3f4f6;
  color: #6b7280;
}

.stat_number {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  line-height: 1;
}

.stat_label {
  display: block;
  font-size: 10px;
  color: #9ca3af;
  margin-top: 2px;
}

.online_body {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  background: #fafafa;
}

/* أقسام المستخدمين */
.user_section {
  margin-bottom: 16px;
}

.section_header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.section_header i {
  font-size: 12px;
}

.users_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.user_card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.user_card:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.user_top_section {
  display: flex;
  align-items: center;
  gap: 7px;
}

.user_avatar {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #f3f4f6;
  flex-shrink: 0;
}

.user_avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.online_indicator {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  background: #10b981;
  border: 2px solid white;
  border-radius: 50%;
}

.user_identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.user_name {
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.2;
}

.user_name:hover {
  color: #6366f1;
}

.rank_badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.2;
  justify-content: center;
}

.rank_badge i {
  font-size: 8px;
}

.rank_owner {
  background: #fee2e2;
  color: #991b1b;
}

.rank_admin {
  background: #fed7aa;
  color: #9a3412;
}

.rank_mod {
  background: #fef3c7;
  color: #92400e;
}

.rank_premium,
.rank_founder,
.rank_vip {
  background: #dbeafe;
  color: #1e40af;
}

.rank_member,
.rank_active {
  background: #d1fae5;
  color: #065f46;
}

.rank_guest {
  background: #f3f4f6;
  color: #6b7280;
}

/* القسم الأوسط - الحالة (مايك/غرفة/قاعة) */
.user_status {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 500;
  width: 100%;
  min-width: 0;
}

.user_status i {
  font-size: 9px;
  flex-shrink: 0;
}

.user_status span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.status_mic {
  background: #f5f3ff;
  color: #6d28d9;
}

.status_room {
  background: #eff6ff;
  color: #1e40af;
}

.status_lobby {
  background: #f3f4f6;
  color: #6b7280;
}

/* القسم السفلي - الوقت والكتم */
.user_bottom_section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding-top: 2px;
}

.time_info {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #9ca3af;
  font-size: 9px;
  white-space: nowrap;
}

.time_info i {
  font-size: 8px;
}

.mute_indicators {
  display: flex;
  gap: 4px;
  align-items: center;
}

.mute_icon {
  color: #ef4444;
  font-size: 10px;
}

/* شريط التمرير */
.online_body::-webkit-scrollbar {
  width: 4px;
}

.online_body::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.online_body::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

.online_body::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* للشاشات المتوسطة */
@media (min-width: 600px) {
  .users_list {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .user_card {
    padding: 10px;
  }

  .user_name {
    font-size: 13px;
  }

  .rank_badge {
    font-size: 10px;
  }

  .user_status {
    font-size: 10px;
  }
}