/* ===== QPM True Messenger App Mode ===== */

.qpm-page{
  max-width:1320px !important;
  margin:18px auto 45px !important;
  padding:0 14px !important;
}

/* نخفي عناصر الصفحة العادية عشان المحادثة تصير مثل التطبيق */
.qpm-hero,
.qpm-unread{
  display:none !important;
}

.qpm-layout{
  display:grid !important;
  grid-template-columns:300px minmax(0,1fr) !important;
  grid-template-areas:"sidebar chat" !important;
  gap:18px !important;
  align-items:stretch !important;
  direction:ltr !important;
}

/* القائمة الجانبية */
.qpm-sidebar{
  grid-area:sidebar !important;
  direction:rtl !important;
  background:#fff !important;
  border:1px solid #eadccd !important;
  border-radius:26px !important;
  padding:14px !important;
  height:calc(100vh - 190px) !important;
  min-height:620px !important;
  max-height:780px !important;
  overflow:auto !important;
  box-shadow:0 18px 45px rgba(36,22,15,.08) !important;
}

.qpm-sidebar-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  border-bottom:1px solid #f0e3d7 !important;
  padding-bottom:12px !important;
  margin-bottom:12px !important;
  position:sticky !important;
  top:0 !important;
  background:#fff !important;
  z-index:3 !important;
}

.qpm-sidebar-head h2{
  margin:0 !important;
  color:#2b180f !important;
  font-size:23px !important;
}

.qpm-sidebar-head a,
.qpm-profile-btn,
.qpm-empty a{
  border:1px solid #eadccd !important;
  background:#fff8ef !important;
  color:#2b180f !important;
  border-radius:14px !important;
  padding:9px 12px !important;
  font-weight:900 !important;
  text-decoration:none !important;
}

.qpm-conversations{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

.qpm-conv{
  display:grid !important;
  grid-template-columns:46px 1fr auto !important;
  gap:10px !important;
  align-items:center !important;
  border:1px solid #eadccd !important;
  border-radius:19px !important;
  padding:10px !important;
  background:#fff !important;
  color:#2b180f !important;
  text-decoration:none !important;
  transition:.18s ease !important;
}

.qpm-conv:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 10px 24px rgba(36,22,15,.08) !important;
}

.qpm-conv.active{
  border-color:#c47b36 !important;
  background:#fff8ef !important;
}

.qpm-conv img{
  width:46px !important;
  height:46px !important;
  border-radius:50% !important;
  object-fit:cover !important;
}

.qpm-conv strong{
  display:block !important;
  font-size:14px !important;
}

.qpm-conv small{
  display:block !important;
  direction:ltr !important;
  color:#c47b36 !important;
  font-weight:900 !important;
  margin:2px 0 !important;
  font-size:12px !important;
}

.qpm-conv p{
  margin:0 !important;
  color:#8b786d !important;
  font-size:12px !important;
  line-height:1.5 !important;
}

/* صندوق المحادثة */
.qpm-chat{
  grid-area:chat !important;
  direction:rtl !important;
  background:#fff !important;
  border:1px solid #eadccd !important;
  border-radius:26px !important;
  overflow:hidden !important;
  height:calc(100vh - 190px) !important;
  min-height:620px !important;
  max-height:780px !important;
  display:flex !important;
  flex-direction:column !important;
  box-shadow:0 22px 60px rgba(36,22,15,.10) !important;
}

.qpm-chat-head{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:14px 18px !important;
  border-bottom:1px solid #eadccd !important;
  background:linear-gradient(135deg,#fffaf4,#fff) !important;
}

.qpm-user{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  color:#2b180f !important;
  text-decoration:none !important;
}

.qpm-user img{
  width:54px !important;
  height:54px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  border:3px solid #fff !important;
  box-shadow:0 8px 22px rgba(36,22,15,.13) !important;
}

.qpm-user h2{
  margin:0 !important;
  font-size:22px !important;
}

.qpm-user p{
  margin:3px 0 0 !important;
  direction:ltr !important;
  color:#c47b36 !important;
  font-weight:900 !important;
}

.qpm-verified{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:21px !important;
  height:21px !important;
  border-radius:50% !important;
  background:#1d9bf0 !important;
  color:#fff !important;
  font-size:13px !important;
  vertical-align:middle !important;
}

/* الرسائل */
.qpm-thread{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:22px 26px !important;
  background:
    radial-gradient(circle at top left, rgba(196,123,54,.08), transparent 35%),
    linear-gradient(180deg,#fff8ef,#fffaf6) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  scroll-behavior:smooth !important;
}

.qpm-thread::-webkit-scrollbar{
  width:9px !important;
}

.qpm-thread::-webkit-scrollbar-track{
  background:#f6eadf !important;
  border-radius:999px !important;
}

.qpm-thread::-webkit-scrollbar-thumb{
  background:#d4a06e !important;
  border-radius:999px !important;
}

.qpm-bubble{
  width:fit-content !important;
  min-width:120px !important;
  max-width:62% !important;
  padding:12px 15px !important;
  border-radius:20px !important;
  line-height:1.85 !important;
  word-break:break-word !important;
  box-shadow:0 10px 24px rgba(36,22,15,.07) !important;
}

.qpm-bubble.mine{
  align-self:flex-end !important;
  background:linear-gradient(135deg,#c47b36,#a95e24) !important;
  color:#fff !important;
  border-bottom-right-radius:6px !important;
}

.qpm-bubble.theirs{
  align-self:flex-start !important;
  background:#fff !important;
  color:#2b180f !important;
  border:1px solid #eadccd !important;
  border-bottom-left-radius:6px !important;
}

.qpm-text{
  font-size:15px !important;
}

.qpm-bubble small{
  display:block !important;
  margin-top:7px !important;
  font-size:11px !important;
  font-weight:900 !important;
  opacity:.82 !important;
}

.qpm-img img{
  display:block !important;
  max-width:320px !important;
  max-height:410px !important;
  object-fit:contain !important;
  border-radius:18px !important;
  margin-top:8px !important;
  box-shadow:0 12px 28px rgba(36,22,15,.12) !important;
}

.qpm-report{
  margin-top:8px !important;
}

.qpm-report button{
  border:1px solid #eadccd !important;
  background:#fff8ef !important;
  color:#b42318 !important;
  border-radius:999px !important;
  padding:5px 10px !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}

/* الإرسال */
.qpm-send{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:12px 14px !important;
  background:#fff !important;
  border-top:1px solid #eadccd !important;
  position:relative !important;
  z-index:5 !important;
}

.qpm-send textarea{
  width:100% !important;
  min-height:54px !important;
  max-height:120px !important;
  border:1px solid #eadccd !important;
  background:#fffaf6 !important;
  border-radius:20px !important;
  padding:13px 16px !important;
  font-family:inherit !important;
  font-weight:900 !important;
  resize:vertical !important;
  outline:none !important;
  transition:.18s ease !important;
}

.qpm-send textarea:focus{
  background:#fff !important;
  border-color:#c47b36 !important;
  box-shadow:0 0 0 4px rgba(196,123,54,.12) !important;
}

.qpm-send-row{
  margin-top:9px !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  gap:10px !important;
  align-items:center !important;
}

.qpm-send-row label{
  border:1px dashed #e3b57e !important;
  background:#fff8ef !important;
  color:#6f5645 !important;
  border-radius:16px !important;
  padding:10px 13px !important;
  font-weight:900 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

.qpm-send-row button{
  height:45px !important;
  min-width:105px !important;
  border:0 !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#c47b36,#a95e24) !important;
  color:#fff !important;
  font-family:inherit !important;
  font-weight:900 !important;
  cursor:pointer !important;
  box-shadow:0 10px 24px rgba(196,123,54,.22) !important;
}

.qpm-empty{
  background:#fff !important;
  border:1px solid #eadccd !important;
  border-radius:20px !important;
  padding:22px !important;
  text-align:center !important;
  color:#6f5645 !important;
  font-weight:900 !important;
}

.qpm-empty-big{
  margin:20px !important;
  min-height:420px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

@media(max-width:1050px){
  .qpm-layout{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "chat"
      "sidebar" !important;
  }

  .qpm-chat,
  .qpm-sidebar{
    height:auto !important;
    max-height:none !important;
  }

  .qpm-chat{
    min-height:680px !important;
  }

  .qpm-thread{
    height:520px !important;
    flex:none !important;
  }
}

@media(max-width:650px){
  .qpm-page{
    padding:0 8px !important;
    margin-top:12px !important;
  }

  .qpm-thread{
    height:460px !important;
    padding:14px !important;
  }

  .qpm-bubble{
    max-width:92% !important;
  }

  .qpm-send-row{
    grid-template-columns:1fr !important;
  }

  .qpm-send-row button{
    width:100% !important;
  }

  .qpm-img img{
    max-width:100% !important;
  }
}