/* ===== تطويرات التفاعل: الألوان، التعليقات، الإشعارات، الترحيب ===== */

/* --- وسم عضو ملوّن --- */
.u-tag { display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--uc,#4F6B7A) }
.u-dot { width:8px; height:8px; border-radius:50%; background:var(--uc,#4F6B7A); display:inline-block; flex:0 0 auto }
.u-chip {
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700;
  color:var(--uc,#4F6B7A); background:color-mix(in srgb, var(--uc,#4F6B7A) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--uc,#4F6B7A) 30%, transparent);
  border-radius:99px; padding:2px 9px; white-space:nowrap;
}

/* --- الترحيب --- */
#welcome-bar {
  display:flex; align-items:center; gap:8px; width:100%;
  padding:9px 14px; margin:0 0 12px; border-radius:12px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--uc) 12%, transparent), transparent 65%);
  border:1px solid color-mix(in srgb, var(--uc) 22%, transparent);
  font-size:.86rem;
}
#welcome-bar .w-dot { width:10px; height:10px; border-radius:50%; background:var(--uc) }
#welcome-bar .w-hi { color:var(--gray-500) }
#welcome-bar .w-name { color:var(--uc); font-size:.95rem }

/* --- صندوق التعليق --- */
.c-box {
  position:relative; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px 10px; margin-bottom:10px; background:#fff;
  border-inline-start:4px solid var(--uc,#4F6B7A);
}
.c-box.c-mine { background:color-mix(in srgb, var(--uc) 5%, #fff) }
.c-head { display:flex; align-items:center; gap:8px; margin-bottom:7px }
.c-name { color:var(--uc,#4F6B7A); font-size:.86rem }
.c-time { margin-inline-start:auto; font-size:.7rem; color:var(--gray-500) }
.c-int {
  font-size:.62rem; padding:1px 7px; border-radius:99px;
  background:rgba(196,155,95,.16); color:#8A6D3B; border:1px solid rgba(196,155,95,.35);
}
.c-body { font-size:.88rem; line-height:1.95; white-space:pre-wrap; color:#243b2f }

/* الإشارة داخل النص */
.mention {
  color:var(--uc,#B8933A); font-weight:700;
  background:color-mix(in srgb, var(--uc,#B8933A) 12%, transparent);
  border-radius:5px; padding:1px 5px;
}

/* --- الإعجاب --- */
.c-foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px; padding-top:8px; border-top:1px dashed var(--line) }
.c-like {
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  border:1px solid var(--line); background:transparent; border-radius:99px;
  padding:4px 12px; font-family:inherit; font-size:.74rem; color:var(--gray-500);
  transition:all .15s;
}
.c-like:hover { border-color:#c9536b; color:#c9536b }
.c-like.on { border-color:#c9536b; color:#c9536b; background:rgba(201,83,107,.09) }
.c-heart { font-size:.9rem; line-height:1 }
.c-count { font-weight:700; min-width:6px }
.c-likers { display:flex; align-items:center; gap:5px; flex-wrap:wrap }
.c-likers-t { font-size:.7rem; color:var(--gray-500) }
.c-empty { font-size:.84rem; color:var(--gray-500); padding:14px 0 }

/* --- قائمة الإشارة --- */
.mention-menu {
  position:absolute; inset-inline-start:8px; bottom:calc(100% + 6px); z-index:60;
  min-width:230px; max-height:250px; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 34px rgba(0,0,0,.16); padding:5px;
}
.mention-menu.hidden { display:none }
.mention-item {
  display:flex; align-items:center; gap:9px; width:100%; text-align:start;
  border:none; background:transparent; cursor:pointer; border-radius:8px;
  padding:9px 11px; font-family:inherit; font-size:.84rem; color:#243b2f;
}
.mention-item:hover, .mention-item.on { background:rgba(23,40,30,.06) }

/* --- الإشعارات: كل مهمة بخلفية مستقلة --- */
.n-group {
  border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:12px;
  border-inline-start:4px solid var(--gc,#4F6B7A);
  background:color-mix(in srgb, var(--gc,#4F6B7A) 4%, #fff);
}
.n-group-head {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; background:color-mix(in srgb, var(--gc,#4F6B7A) 10%, #fff);
  border-bottom:1px solid color-mix(in srgb, var(--gc,#4F6B7A) 18%, transparent);
}
.n-group-head b { font-size:.86rem; color:var(--gc,#4F6B7A) }
.n-group-head .n-count { margin-inline-start:auto; font-size:.7rem; color:var(--gray-500) }
.n-item { display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid rgba(0,0,0,.05); background:transparent; cursor:pointer }
.n-item:last-child { border-bottom:none }
.n-item.unread { background:rgba(196,155,95,.09) }
.n-item .n-t { font-size:.84rem; font-weight:700; color:#243b2f }
.n-item .n-b { font-size:.78rem; color:var(--gray-500); line-height:1.8; margin-top:3px }
.n-item .n-d { margin-inline-start:auto; font-size:.68rem; color:var(--gray-500); white-space:nowrap }
.n-kind {
  font-size:.62rem; padding:1px 7px; border-radius:99px; align-self:flex-start;
  border:1px solid var(--line); color:var(--gray-500); white-space:nowrap;
}
.n-kind.mention { border-color:#B8933A; color:#8A6D3B; background:rgba(196,155,95,.14) }
.n-kind.like { border-color:#c9536b; color:#c9536b; background:rgba(201,83,107,.1) }

.sub-line { font-size:.72rem; color:var(--gray-500) }

@media (max-width:640px) {
  .c-box { padding:11px 12px 9px }
  .c-foot { gap:7px }
  .mention-menu { inset-inline:8px; min-width:0 }
  #welcome-bar { font-size:.8rem; padding:8px 12px }
}