@charset "UTF-8";

  .modal-content {
  border-radius: 16px;
}
.form-select {
  flex: 1 1 auto;
  min-width: 120px;
 /* border-radius: 12px;*/
  padding: 0.5rem 1rem;
  font-size: 14px;
}
textarea {
  border-radius: 12px;
  border: 1px solid #ced4da;
  padding: 1rem;
  font-size: 14px;
  resize: none;
}
.form-switch .form-check-input {
  cursor: pointer;
  width: 50px;
  height: 25px;
}
.form-check-label {
  font-weight: 500;
}
.btn_post {
  border-radius: 12px;
  padding: 0.6rem 1.5rem;
  font-size: 16px;
}

  .post_react {
   cursor: pointer;
   padding: 4px 8px;
   border-radius: 8px;
   transition: background 0.2s;
   font-size: 13px;
}
.post_react:hover {
   background: #f1f1f1;
}
.total-comment-block, 
.share-block a {
   cursor: pointer;
   transition: color 0.2s;
}
.total-comment-block:hover span,
.share-block a:hover {
   color: #0d6efd;
}

  .color_line{
    color: #5a5858;
  }
  .avatar-wrapper {
  padding: 2px;                      /* مسافة صغيرة حول الصورة */
  border-radius: 50%;                /* يخلي الإطار دائري */
  background: #dad8d8; /* حلقة ملونة ناعمة */
  display: inline-flex;
}

.avatar-wrapper img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;            /* إطار أبيض داخلي */
}

    .avatar{
      width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#60a5fa,#2563eb);display:inline-flex;align-items:center;justify-content:center;color:white;font-weight:600;
    }
    .meta{flex:1}
    .meta .name{font-weight:700}
    .meta .msg{font-size:13px;color:var(--muted);margin-top:4px}

    /* chat dock container */
    .chat-dock{
      position:fixed;
      bottom:16px;
      right:16px;
      display:flex;
      gap:var(--box-gap);
      align-items:flex-end;
      z-index:9999;
      pointer-events:none; /* enable per-box pointer-events */
    }

    .chat-box{
      width:var(--box-width);
      max-height:60vh;
	    height:60vh;
      background:var(--card-bg);
      border-radius:12px;
      box-shadow:0 12px 30px rgba(2,6,23,0.12);
      display:flex;
      flex-direction:column;
      overflow:hidden;
      pointer-events:all;
      transition:transform .18s ease, opacity .18s ease;
      width:320px;
    }

    .chat-header-box{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 12px;
      background:#858ac2;
      color:white;
      /*margin: 50px 0px 0px 0px;*/
    }
    .chat-header-box .left{display:flex;gap:10px;align-items:center}
    .chat-header-box .name{font-weight:700}
    .chat-actions button{background:transparent;border:0;color:rgba(255,255,255,0.9);cursor:pointer;margin-left:8px;font-size:14px}

    .chat-body-box{
      padding:25px;
      display:flex;
      flex-direction:column;
      gap:8px;
      overflow:auto;
      background:linear-gradient(180deg,#f8fafc,#ffffff);
      flex:1;
    }

    .msg-row{display:flex;max-width:80%}
    .msg-row.right{align-self:flex-end;justify-content:flex-end}
    .msg-bubble{
      padding:8px 10px;border-radius:12px;font-size:14px;line-height:1.6;box-shadow:0 4px 12px rgba(2,6,23,0.06)
    }
    .msg-bubble.left{background:#f1f5f9;border-top-right-radius:12px;border-top-left-radius:12px}
    .msg-bubble.right{background:var(--accent);color:#565656;border-bottom-right-radius:12px;border-bottom-left-radius:12px}

    .msg-meta{font-size:11px;color:var(--muted);margin-top:6px;text-align:left}

    .chat-input{
      display:flex;
      gap:8px;
      padding:10px;
      border-top:1px solid #eef2f7;
      align-items:center;
      background:linear-gradient(180deg,#ffffff,#fbfdff);
    }
    .chat-input input{
      flex:1;border:1px solid #e6eef7;padding:8px 10px;border-radius:10px;font-size:14px;outline:none;
    }
    .chat-input button{background:var(--accent);color:white;padding:8px 12px;border-radius:10px;border:0;cursor:pointer}

    .minimized .chat-body-box,
    .minimized .chat-input{
      display:none;
    }
    .minimized{width:220px}

    /* responsive mobile: full screen single chat ;max-height:80vh */
    @media (max-width:640px){
      .chat-dock{left:0;right:0;bottom:0;justify-content:center}
      .chat-box{width:100%;max-width:100%;border-radius:8px 8px 0 0;max-height:60vh}
    }


    .active-react{
      background-color: #e5eef6; 
    }

    .border-img{
      border: 1px solid; border-radius: 22px;
    }

    .notyf__toast {
      width: 700px !important;
      text-align: right;
    }

    .postion_btn_follow{
     /* padding: 2px 5px 2px 5px;*/
       margin: 0px 5px 5px 0px;
      border: none;
    }


      body::-webkit-scrollbar {
  display: none;
}
body {
  -ms-overflow-style: none;  /* IE و Edge */
  scrollbar-width: none;     /* Firefox */
}

.chat-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-emoji {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.emoji-picker {
  display: none;
  position: absolute;
  bottom: 50px;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  width: 300px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
  font-size: 20px;
}
.emoji-header { margin-bottom: 6px; }
.emoji-header input {
  width: 100%;
  padding: 5px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.emoji-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.emoji-tabs button {
  flex: 1;
  border: none;
  background: #f4f4f4;
  padding: 4px 0;
  cursor: pointer;
  border-radius: 4px;
  font-size: 18px;
}
.emoji-tabs button.active {
  background: #4a90e2;
  color: #fff;
}
.emoji-content {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.emoji-group span {
  cursor: pointer;
  font-size: 23px;
}
  .comment-options {
  margin-top: 5px;
  display: flex;
  gap: 5px;
}

  .send-btn {
  display: none;
}


.list_reply_comment {
  max-height: 250px;   /* أقصى ارتفاع تحدده */
  overflow-y: auto;    /* يعطيك سكرول عمودي */
  overflow-x: hidden;  /* يخفي أي سكرول أفقي */
}


.show-mobile {
  display: none;
}

.show-desktop {
  display: inline-block;
}

@media (max-width: 768px) {
  .show-mobile {
    display: block;
  }
  .show-desktop {
    display: none;
  }
}

@media (max-width: 767px) {
  .send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -15px 0px 0px -8px;
  }
}
  .comment-box {
  width: 100%;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper textarea {
  width: 100%;
  resize: none;
  min-height: 45px;
  padding-right: 40px; /* مساحة للزر */
}

.input-wrapper .send-btn {
  position: absolute;
  right: 5px;
  bottom: 5px;
  background: #0d6efd;
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.extra-actions {
  margin-top: 10px;
  text-align: left;
}



.dropdown {
  position: relative;
  display: inline-block;
}

.btn-options {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #fff;
  margin-left: 6px;
}

.dropdown-menu {
  display: none;
  position: absolute;
 /* left: 0;*/
  top: 100%;
 /* background:rgb(36, 19, 36);*/
  border: 1px solid #ccc;
  border-radius: 6px;
  min-width: 150px;
  z-index: 1000;
}

.dropdown-menu .dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  text-align: right;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-menu .dropdown-item:hover {
  background:rgb(221, 220, 221);
}

.menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #928888;
  font-size: 18px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #fff;
  min-width: 100px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  display: block;
  padding: 8px;
  text-decoration: none;
  color: #333;
  cursor: pointer;
}

.dropdown-content a:hover {
  background-color: #f2f2f2;
}

.dropdown:hover .dropdown-content {
  display: block;
}